如何在浮动div中垂直和水平居中锚点元素？

Question

我知道这个问题以前已经被问了一千次了，我很抱歉再次问了一遍，但我在搜索了几分钟后还是没能弄明白。

我尝试在div元素中水平和垂直居中定位一个锚点元素。这个问题的基础如下。

<div></div>
<div></div>
<div>
    <a href="">Hello</a>
</div>
<div></div>
<div></div>

div {
    width: 100px;
    height: 100px;
    background-color: teal;
    box-sizing: border-box;
    margin: 10px;
    float: left;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

a {
    color: white;
    text-decoration: none;
    font-style: 14px;
}

现在，我知道我可以在包含的div上使用text-align: center;来水平居中定位元素，我可以在div上使用display: table-cell; vertical-align: middle;来垂直对齐它，但它们似乎不能一起工作，特别是当div设置为左浮动时。

如何才能实现这个相当简单的布局呢？另外，请详细说明为什么我正在尝试的东西不能工作，因为我想学习而不是仅仅解决这个问题。

我不喜欢使用line-height，因为它会中断多行文本。

http://jsfiddle.net/xHLze/2/

Answer 1

你基本上在你的问题中列出了答案，尽管你可能只需要将样式应用到几个不同的地方：

我将display: table;放在包含的<div>上，允许我在<a>元素上设置display: table-cell;，之后我可以应用vertical-align: middle;使文本垂直居中。

然后，我对<a>元素应用了text-align: center;以使其水平居中。

http://jsfiddle.net/3RfgD/

我相信您忽略的是，您应该在table-cell元素的父级上设置display: table;，以便它能够正常工作。(如果一个元素不在表格中，那么它就不能作为表格的单元格，无论它是一个实际的表格还是一个CSS表格)

Answer 2

使用锚标签的页边距自动将其在div标签的中心对齐，如下所示：

a{margin:0 auto;}

这会自动使文本在垂直和水平方向居中。:)但是因为锚标签是内联标签，所以我们需要将它指定给div标签，如下所示

div a {display:block;
width:50px;}

其中50px是相对于div的宽度。点击此处查看why margin 0 auto doesn't work