CSS如何實現垂直水平居中

這篇文章主要介紹了關於CSS如何實現垂直水平居中，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

前言

面試中常被問到，如何使用css來實現一個元素的垂直水平方向上居中，特別是筆試題的時候，這道題目的出現頻率還是比較高的，當然，在我們的生活中，也常常會有垂直水平居中的需求。

CSS實作垂直水平居中的三種方案

1.容器內元素display:inline/inline-block

這種情況就比較容易了，直接設定容器的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;    
        }

2.容器內元素display:block,且元素寬高已知

這種情況下我們使用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;    
     }

3.容器內元素display:block,且元素寬高未知

這種方法與方法二類似，但是不同的是不能通過設定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實作各種居中的方法

以上是CSS如何實現垂直水平居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！