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;css设置文字垂直居中
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>
//亲测有效

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。