顽石系列:CSS实现垂直居中的五种方法 方法一:Vertical-Align法
我们使用 vertical-align:middle 来实现元素垂直居中。
CSS 的属性 vertical-align 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。
我们可以把div 的显示方式设置为表格,从而使用表格的 vertical-align middle 属性。
<style> #wrapper{ width: 200px; height: 200px; background-color: aqua; display: table; } #content{ display: table-cell; vertical-align: middle; } </style> <div> <div> Content is Here! </div> </div>