我对此进行了一些研究,从我发现你有四个选择:
版本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;
}
现场演示