码迷,mamicode.com
首页 > 其他好文 > 详细

垂直居中 方法总结

时间:2016-08-21 19:55:40      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:

  本文为思路提示篇,因此未详细述说代码,主要总结思路。

1. dispaly:table-cell;

   vertical-align:middle;

2. 

下面这个样式利用了translate来巧妙实现了垂直居中样式,需IE9+。

.center-vertical {
    position: relative;
    top: 50%;
/*这里是相对父元素的宽高来说的,这里的50%;*/ transform: translateY(-50%);
或者margin一个负的自身高度 }

3. 父元素 relative 

    其本身absolute;方法同上,top:50%;

4. flexbox

 

垂直居中 方法总结

标签:

原文地址:http://www.cnblogs.com/nostic/p/5793274.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!