本文主要和大家分享css水平垂直居中的4種實現方法，方案中我也給了寬高,但並不是說寬高固定了。而是以為不給寬高無法看到效果。這個方案不固定寬高的是指,用這個方案之後,如果你父元素、子元素的寬高發生了改變,依舊可以保證是水平垂直居中的位置。
以下四種方案都是能夠實現,當父元素或子元素的寬高發生改變時,依舊維持水平垂直居中佈局的方案。
html
<p class="father"> <p class="son"></p> </p>
css
.father {
position: relative;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
background: red;
}#html不變
<p class="father"> <p class="son"></p> </p>
css
.father {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
width: 100px;
height: 100px;
background: red;
}需要設定父元素為display:table-cell,利用vertical和text-align可以讓所有的行內區塊級元素水平垂直居中
為子元素設定display: inline-block
html 不變
<p class="father"> <p class="son"></p> </p>
css
.father {
display: table-cell;
width: 200px;
height: 200px;
background: skyblue;
vertical-align: middle;
text-align: center;
}
.son {
display: inline-block;
width: 100px;
height: 100px;
background: red;
}html不變
<p class="father"> <p class="son"></p> </p>
css不變
.father {
display: grid;
align-items:center;
justify-content: center;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
width: 10px;
height: 10px;
border: 1px solid red
}相關建議：
以上是css水平垂直居中的4種實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
