css实现垂直居中

实现水平居中，比较简单，对于行内元素，设置text-aligin:center;对于块级元素，设置left:0;right:0;margin: 0 auto。

以下是实现垂直居中的方法：

1.最简单的文字垂直居中，利用line-height属性，设置其和父元素等高

2.父元素设置样式table-cell

{display:table-cell;vertical-align:middle;}

低版本的IE浏览器，还需要给子元素添加{display:inline-block;}

3.给父元素添加伪类

:after{content:";width:0;height:100%;display:inline-block;vertical-align:middle;}

4.块级元素已知宽高的话，利用定位和负边距，若不想脱离文档流，子元素可以设置相对定位

.parent{position:relative;}

.child{position:absolute;width:100px;height:100px;top:50%;margin-top:-50px;}

5.块级元素已知宽高，利用定位和0，若不想脱离文档流，子元素可以设置相对定位

.parent{position:relative;}

.child{position:relative;width:100px;height:100px;top:0;bottom:0;margin auto 0;}

6.利用css3中的translate，目前浏览器支持情况：Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE9+

.child{position:absolute;top:50%;left:50%;width:100%;transform:translate(-50%,-50%);}

7.利用flex布局，但是有兼容问题

Android

2.3 开始就支持旧版本display:-webkit-box;

4.4 开始支持标准版本display: flex;

IOS

6.1 开始支持旧版本display:-webkit-box;

7.1 开始支持标准版本display: flex;

PC

ie10开始支持，但是IE10的是-ms形式的。

.parent{display:flex;align-items:center;}

8.利用flex布局和margin:auto

.parent{display:flex;}

.child{margin:auto;}

9.利用display:-webkit-box

.parent{display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;-webkit-box-orient: vertical;text-align: center;}