#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也可實現居中；
