常见的垂直居中布局方式

1. display:table-cell与vertical-align: middle       无论元素是行内元素，还是块元素，均可以通过设置display:table-cell;和vertical-align: middle，则可实现元素居中。若元素是行内元素，那么就在其自身里面设置这两个特性；若元素是块元素，那么就在其父元素里面设置。

2. flex弹性布局         上一篇介绍怎么使用flex实现元素的水平居中布局，类似地，也可以使用flex实现垂直居中布局。设置如下：        <pre>     .son{          display: flex;            align-items:Center;     }     </pre>  

    如果需要同时实现水平以及垂直的居中，则在样式里面同时设置justify-content:center;和align-items:Center;。

    除了以上的方法，还可以通过flex与margin的结合实现，具体设置如下：     <pre>     .parent{         display: flex;         text-align: center;         height:100px;         background:red;     }

    .parent span{         margin:auto;     }     </pre>

3. 绝对定位position         使用绝对定位的方式也能实现垂直居中，设置如下:        <pre>     div{         width: 50%;          height: 50%;          background: red;         margin: auto;          position: absolute;          top: 0;         left: 0;         bottom: 0;         right: 0;  

由睿江云人员提供，想了解更多，请登陆www.eflycloud.com

转载于:https://my.oschina.net/u/3363053/blog/1524982