這篇文章主要介紹了關於CSS如何實現垂直水平居中，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
面試中常被問到，如何使用css來實現一個元素的垂直水平方向上居中，特別是筆試題的時候，這道題目的出現頻率還是比較高的，當然，在我們的生活中，也常常會有垂直水平居中的需求。
這種情況就比較容易了，直接設定容器的text-align就可以實現內容元素的水平居中，設定垂直居中的話要設定容器的高度，然後設定容易的line-height===height就可以，如下：
<p class="container">
<span>this is text</span>
</p> .container{
text-align: center;
height: 50px;
background: green;
line-height: 50px;
}這種情況下我們使用position這個屬性結合設定偏移來實現。首先將容器的position:relative,設定元素position設為absolute，然後設定元素（.inner-box）的偏移top,left,margin-top,margin-left,其中，top，left設定為50%,而margin -top/margin-left的偏移量均為本身元素高/寬的一半，為負值。
程式碼如下：
<p class="container">
<p class="inner-box"></p>
</p> .container {
height: 200px;
width: 200px;
background: pink;
position: relative;
}
.inner-box {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
height: 100px;
width: 100px;
background: green;
}這種方法與方法二類似，但是不同的是不能通過設定margin-top/left偏移來達到效果了，因為容器內元素的寬高是未知的。這次我們透過設定left/top/bottom/right:0,然後設定margin:auto。
程式碼如下：
<p class="container">
<p class="inner-box"></p>
</p> .container {
height: 200px;
width: 200px;
background: pink;
position: relative;
}
.inner-box {
position: absolute;
height: 100px;
width: 100px;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
background: green;
}實現垂直水平居中的方式有多種，透過設定translate，或是使用flex佈局也是可以的，但以上寫的幾種方法是相容性比較好的。如果有不足，歡迎這位大佬指出。
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
以上是CSS如何實現垂直水平居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！
