1、 ⽔平居中：给div设置⼀个宽度，然后添加margin:0 auto属性

div{

width:200px;

margin:0 auto;}

2、让绝对定位的div居中

div {

position: absolute;

width: 300px;height: 300px;

margin: auto;

top: 0;

left: 0;

bottom: 0;

right: 0;

background-color: pink; }

3、⽔平垂直居中⼀

确定容器的宽⾼ 宽500 ⾼ 300 的层

设置层的外边距

div {

position: relative; /* 相对定位或绝对定位均可 */

width:500px;

height:300px;

top: 50%;

left: 50%;

margin: -150px 0 0 -250px; /* 外边距为⾃身宽⾼的⼀半 */

background-color: pink; /* ⽅便看效果 */

}

4、⽔平垂直居中⼆

未知容器的宽⾼，利⽤ `transform` 属性

div {

position: absolute; /* 相对定位或绝对定位均可 */

width:500px;

height:300px;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

background-color: pink; /* ⽅便看效果 */

}

5、⽔平垂直居中三

利⽤ flex 布局

实际使⽤时应考虑兼容性

.container {

display: flex;

align-items: center; /* 垂直居中 */

justify-content: center; /* ⽔平居中 */

}