那么在当前情况下可以将div中心化吗?
最佳答案
如果你知道你居中的div的高度(我将假设它是.text),那么你可以这样做:
.square .text {
height: 100px;
top: 50%;
margin-top: -50px; /* This should be half of height */
}
如果将div的顶部放在父容器的50%处,则会执行此操作. margin-top将其向上推,使中心位于父级的中心.
编辑:使用变换显示示例:
.square .text{
border:1px dotted #d6d6d6;
margin: 0 10px;
padding: 5px;
vertical-align: center;
max-height: 100px;
overflow: auto;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
这不适用于不支持转换的浏览器.见这http://jsfiddle.net/WEQVK/