如何垂直对齐具有定义的宽度高度的div内容的中心？

如何垂直对齐具有定义的宽度/高度的div内容的中心？

我对此进行了一些研究，从中发现您有四个选择：

版本1：父div，显示为表格单元

如果您不介意

display:table-cell

在父div上使用，则可以使用以下选项：

.area{    height: 100px;    width: 100px;    background: red;    margin:10px;    text-align: center;    display:table-cell;    vertical-align:middle;}​

---

版本2：具有显示块和内容显示表单元的父div

.area{    height: 100px;    width: 100px;    background: red;    margin:10px;    text-align: center;    display:block;}.content {    height: 100px;    width: 100px;    display:table-cell;    vertical-align:middle;    }​

---

版本3：父div浮动和内容div作为显示表格单元

.area{    background: red;    margin:10px;    text-align: center;    display:block;    float: left;}.content {    display:table-cell;    vertical-align:middle;    height: 100px;    width: 100px;}​

---

版本4：父div相对位置，内容绝对位置

我使用该版本的唯一问题是，似乎您将不得不为每个特定的实现创建css。原因是内容div需要具有您要填充的文本的设置高度，并且要从中确定页边距的顶部。在演示中可以看到此问题。您可以通过更改内容div的高度百分比并将其乘以-.5来获得最高边距值，从而使其手动适用于每种情况。

.area{    position:relative;     display:block;    height:100px;    width:100px;    border:1px solid black;    background:red;    margin:10px;}.content {     position:absolute;    top:50%;     height:50%;     width:100px;    margin-top:-25%;    text-align:center;}​