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;
}
<div id="div1">
<p></p>
</div>
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; !*如果设置了浮动,则自动居中就会失效。*!*/
}
<div id="div2">
<h4>其他内容</h4>
<p></p>
<h3>其他内容</h3>
</div>
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;
}
<div id="div3">
<p></p>
<h3>其他内容</h3>
</div>
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%);
}
<div id="div4">
<p></p>
<h3>其他内容</h3>
</div>
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%);
}
<div id="div5">
<p></p>
<h3>其他内容</h3>
</div>
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;
}
<div id="div6">
<p></p>
</div>
//亲测有效