css实现div的水平垂直居中方法

一、大家经常会遇到元素垂直居中问题，面试也是经常问的，所以现在总结几种常见的垂直居中的方法。
1、水平居中：
div{
width:200px;
margin:0 auto;
}
2、使用绝对定位的万能居中：
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink; /* 方便看效果 */
}
3、水平垂直居中，通过定位与margin相结合：

确定容器的宽高 宽500 高 300 的层
设置层的外边距
div {
position: relative; /* 相对定位或绝对定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px; /* 外边距为自身宽高的一半 */
background-color: pink; /* 方便看效果 */

}
4、通过css3的translate:

未知容器的宽高，利用 transform 属性

div {
position: absolute; /* 相对定位或绝对定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink; /* 方便看效果 */

}
5、使用flex布局实现居中：

利用 flex 布局
实际使用时应考虑兼容性

.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */

}
.container div {
width: 100px;
height: 100px;
background-color: pink; /* 方便看效果 */
}