html div内容纵向对齐,html - 如何垂直对齐到具有定义宽度/高度的div内容的中心？...

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

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

如果您不介意在父div上使用display:table-cell，则可以使用以下选项：

.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来获得您的margin-top值，从而手动使其适用于每个场景。

.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;

}​

现场演示