CSS设置垂直居中

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

苏州实时公交查询

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

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>

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%;
}

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

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

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

支付宝扫一扫打赏

微信扫一扫打赏