div居中的几种方式

#pp{

position: absolute;

display: flex;

height: 200px;

width: 200px;

margin: auto;

top: 0;

left: 0;

right: 0;

bottom: 0;

/*text-align: center;*/

background-color: pink;

}

1、绝对定位加top: 0;left: 0;right: 0;bottom: 0;可居中

display: flex;

margin: 0 auto;

align-items: center;

align-self: center;

justify-content: center;

height: 100px;

width: 100px;

background-color: green;

2、使用伸缩盒子（display: flex;）的align-self: center;垂直居中，margin: 0 auto;实现水平居中

3、其中align-items: center;justify-content: center可使子元素居中。

#pp div div div{

position: absolute;

display: table;

height: 50px;

width: 50px;

background-color: black;

top: 50%;

left: 50%;

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

}

4、position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);利用这几个css也可实现居中

#pp div div div div{

display: table-cell;

height: 20px;

width: 20px;

background-color: blue;

}

5、父元素使用display：table,子元素display：table-cell也可实现居中；