Html 与CSS垂直对齐

我正在尝试垂直对齐div标记中的内联元素。这是我的HTML：

<div class="foo">
    <div id="bar">
        <a href="#">Link 1</a>
    </div>
</div>     

如何垂直对齐此定位标记？我是否用正确的方法设置了HTML/CSS来有效地实现这一点？垂直对齐内嵌元素和块元素的最佳实践是什么

---

谢谢

。css最纯粹的方法是使用

显示

属性，如下所示：

.foo { display: table; } 
#bar {
    display: table-cell;
    vertical-align: middle;
}

---

这是假设您的#条具有某个描述集的高度，其内容应垂直对齐。

上述操作应有效。值得注意的是，“垂直对齐”实际上是相对于彼此对齐内联元素。例如，如果在文本行中有图像，则设置“垂直对齐：中间；”将使文本与图像的中间对齐。它不用于块级定心。您可以在此处阅读更多内容：

.foo { display: table; } 
#bar {
    display: table-cell;
    vertical-align: middle;
}