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; /* 方便看效果 */

}