CSS设置垂直居中

2014-01-27阅读(5242)评论(0)牵着狗狗看MM

苏州实时公交查询

解决思路是得到父元素的height,减去子元素的height,再除以2,得到的结果作为像素值内联Top属性。其实就是父元素的50%的高度再减去子元素50%的高度。
下图解释:
vertical-center
上图中红色的“210px”,是我们需要在“top”属性设置的值。
当然,你也可以通过在窗口加载后,或者调整窗口/对象后,再运行一个重新计算位置的javascript。但是,如果有几百个元素的时候,用脚本的话,性能会很差。

HTML代码

[html]<div style="height:300px;position:relative;width:500px;">
<div class="wrapz fluid">
<div class="parent bigger">
<div class="children">我在垂直居中位置</div>
</div>
<div class="parent smaller">
<div class="children">我也是</div>
</div>
</div>
</div>
[/html]

CSS代码

[css].wrapz {
background: #eee;
color: #FFF;
font-family: Helvetica, Arial, sans-serif;
left: 50%;
top: 50%;
height: 80%;
width: 80%;
position: absolute;
text-align: center;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.parent{
background: lightblue;
padding: 1%;
position: absolute;
height: 50%;
width: 30%;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);

}

.bigger{
left: 10%;
}

.smaller{
right: 10%;
}

.children{
background: lightgreen;
display: block;
padding-top: 10%;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}

.bigger .children{
height: 140%;
}

.smaller .children{
height: 80%;
}
[/css]

demo演示地址:http://www.w3cways.com/example?pid=1216

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » CSS设置垂直居中
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏