关于css的垂直水平居中六种方法分享

*1.绝对定位，宽高都已知的情况下如下代码可实现，或者可以使用negative margins；

.div { 
 width: 200px;
 height: 200px;
 margin: auto; 
 position: absolute; 
 top: 0; left: 0; bottom: 0; right: 0; 
}

2.不知道元素的宽高，仅仅实现某个div是其父的1/2，水平垂直居中，随着父元素的大小等比例放大或者缩小。

.div{
 position: absolute;
 left: 30%;
 right:30%;
 top: 25%;
 bottom:25%;
}

*3.translate，宽度已知，高度未知的情况下

.wrap{
 width:200px;//也可以不写，默认占总宽度的50%
 position: absolute;
 top:50%;
 left:50%;
 transform: translate(-50%,-50%);
 -webkit-transform: translate(-50%,-50%);
}

4.table-cell，div本身高度未知，仅仅实现垂直居中的情况下，ps，此种情况div宽度是100%

.wrap{//外层容器
 display: table;
}
.div{//内层容器
 display: table-cell; 
 vertical-align: middle; 
}

*5.flex布局，宽度都不固定的情况下，只要在父容器中设置display:flex即可。

.wrap{
 display: flex;
 display: -webkit-flex;
 justify-content: center;
 align-items: center; 
}

6.hack方法，善于运用:after。

.wrap { 
 text-align: center; 
 overflow: auto; 
} 
.wrap:after, 
.div { 
 display: inline-block; 
 vertical-align: middle; 
} 
.div:after { 
 content: ''; 
 height: 100%; 
 margin-left: -0.25em; /* 需要根据不同的字号做调整 */ 
} 
.wrap { 
 max-width: 99%; /* 防止文档过长时会到容器的顶部 */ 
 max-width: calc(100% - 0.25em) /* Only for IE9+ */ 
}