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

我知道这个问题已经被问过一千次了，我很抱歉再次问，但是在几分钟的搜索之后我还没有弄明白

我试图在

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{
宽度：100px；
高度：100px；
背景色：青色；
框大小：边框框；
利润率：10px；
浮动：左；
文本对齐：居中；
显示：表格单元格；
垂直对齐：中间对齐；
}
a{
颜色：白色；
文字装饰：无；
字体样式：14px；
}

现在，我知道我可以使用

文本对齐：居中div

上的code>以水平居中定位锚元素，我可以使用

显示：表格单元格；垂直对齐：中间对齐div

上的code>设置为垂直对齐，但它似乎不能一起工作，尤其是当

div

设置为向左浮动时

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

我不希望使用

行高

，因为它与多行文本断开

---

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

我把

显示：表格

的面板上的code>，允许我设置

显示：表格单元格

我认为您遗漏的是您应该设置
display:table表格单元格中的
元素父项上进行编码，以使其正常工作。（如果元素不在表中，则它不能充当表的单元格，无论它是实际表还是CSS表）
使用锚定标记的边距将其自动对齐到div标记的中心，如下所示：

a{margin:0 auto;}

这会自动在垂直和水平方向上集中文本。：）但是由于锚标记是内联标记，我们需要针对div标记指定它，如下所示

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

其中50px是相对于div的宽度。在这里查看
啊！这就是问题所在。我真蠢！非常感谢你！噢
table cell
hmm比margin 0 auto更好！谢谢@Blake学到了一些新东西有没有一种方法可以将一组盒子居中？@PeterX现在有很多种方法可以将盒子居中，这取决于你想让它们水平居中、垂直居中还是两者都居中。如果使用表格显示设置，则可以使用
文本对齐
、
flexbox
或
垂直对齐
等功能。如果你有一个特定的中心问题，我建议你打开一个新的问题solve@Siddharth哦，是的！这毕竟是一个锚标签！我更新了代码。您也使用了边距0 auto thingy，但它在各种浏览器中都有问题。