CSS子元素相对父元素水平垂直居中

1.水平居中(margin: auto;)子父元素宽度固定，子元素上设置 margin: auto; 子元素不能设置浮动，否则居中失效。

div1{ //父

width: 300px;
height: 300px;
background-color: antiquewhite;
}
#div1 p {子
width: 100px;
height: 100px;
background-color: red;
/float: left; !设置了浮动,自动居中就会失效。!/
margin: 0 auto;
}

2.水平居中，子父元素宽度固定，父元素设置 text-align: center;
子元素设置 display: inline-block; 子元素不能设置浮动，否则居中失效。
如果将元素设置为 inline , 则元素的宽高设置会失效，这就需要内容来撑起盒子

div2 {

width: 300px;
height: 300px;
background-color: antiquewhite;
text-align: center;
}
#div2 p{
width: 100px;
height: 100px;
background-color: red;
margin: 0;
/float: left; !如果设置了浮动，则自动居中就会失效。!/
}

其他内容

其他内容

3.水平垂直居中，子元素相对于父元素绝对定位，
子元素top，left设置为50%，子元素margin的top，left减去自身高，宽的一半。

div3 {

width: 300px;
height: 300px;
background-color: antiquewhite;

position: relative;
}
#div3 p {
width: 100px;
height: 100px;
background-color: aqua;

/margin-top: 10%; !百分比相对于父元素!/
/padding-top: 10%; !百分比相对于父元素!/
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}

其他内容

4.水平垂直居中，子元素相对定位，top，let设为50%，transform: translate(-50%, -50%);
这种方式并不会释放子元素在文档中所占的位置。

div4{

width: 300px;
height: 300px;
background-color: antiquewhite;
}
#div4 p {
width: 100px;
height: 100px;
background-color: aqua;
margin: 0;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

其他内容

5.水平垂直居中，子元素相对于父元素绝对定位，
子元素top，let设为50%，transform: translate(-50%, -50%);
这种方式会释放子元素在文档中所占的位置

div5{

width: 300px;
height: 300px;
background-color: antiquewhite;
position: relative;
}
#div5 p {
width: 100px;
height: 100px;
background-color: aqua;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

其他内容

6.水平垂直居中，父元素设置 display: flex; justify-content: center; align-items: center;
justify-content: center; 是让所有的子元素作为一个整体居中。

div6{

width: 300px;
height: 300px;
background-color: antiquewhite;

display: flex;
justify-content: center;
align-items: center;
}
#div6 p{
width: 100px;
height: 100px;
background-color: aqua;
margin: 0;
}

//亲测有效