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

【问题标题】：How do I center an anchor element both vertically and horizontally in a floating div?如何在浮动 div 中垂直和水平居中锚元素？
【发布时间】：2014-09-18 10:55:44
【问题描述】：

我知道这已经被问过一千次了，我很抱歉再次问这个问题，但经过几分钟的搜索，我还是无法弄清楚。

我正在尝试将一个锚元素在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/

【问题讨论】：

标签： html css

【解决方案1】：

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

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

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

http://jsfiddle.net/3RfgD/

我认为您错过的是您应该在 table-cell 元素父级上设置 display: table; 以使其正常工作。（如果元素不在表格中，则不能充当表格的单元格，无论是实际表格还是 CSS 表格）

【讨论】：

啊！这就是问题所在。我多么愚蠢！非常感谢！
Oooh table-cell hmm 比 margin 0 auto 好！谢谢@Blake 学到了一些新东西。 :D
有没有办法让这组盒子居中？
@PeterX 现在有多种方法可以使框居中，这取决于您是希望它们水平居中、垂直居中还是两者居中。如果使用表格显示设置，您可以使用 text-align、flexbox 或 vertical-align 之类的东西。如果您有需要解决的特定中心问题，我建议您打开一个新问题

【解决方案2】：

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

a{margin:0 auto;}

这会自动将您的文本垂直和水平集中。 :) 但是由于锚标签是内联标签，我们需要像这样针对 div 标签指定它

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

其中 50px 是相对于 div 的宽度。在这里查看why margin 0 auto doesn't work

【讨论】：

@Siddharth 哦，是的！毕竟是锚标签！我更新了代码。你也使用了margin 0 auto thingy，但它在各种浏览器上都有问题。