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布局也是可以的，但是以上寫的幾種方法是相容性比較好的。如果有不足，歡迎這位大佬指出。

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！