CSS常見居中方法大團圓

Markdown

還有幾天就是農歷新年了，于我們而言這是個舉國歡慶、闔家團員的大日子。提前祝各位朋友新年快樂，家人健康。
言歸正傳，借這個機會抽時間總結了一下css中常見的居中方法，也讓它們沾沾喜氣團圓一下。
css元素的居中可以分為三類：水平居中，垂直劇中，水平&垂直居中。其中行內元素、寬高固定的塊元素、寬高不固定的塊元素居中方法又各有千秋，接下來分門別類為大家一一道來。

1 水平居中

1.1 行內元素居中

對象：
行內元素（text、img、button等）；
display為inline-bloc的非浮動塊元素；
方法：
父元素設置text-align：center；

1.2 單個塊元素（固定寬度）居中

方法：
為元素設置margin：0 auto即可；

1.3 多個塊元素（寬度固定）水平排列居中

Markdown

方法1：
要居中的塊元素設置display：inline-block變為行內塊元素（不能用flaot），然后給其父元素設置text-align：center即可。
請看代碼示例：

<style>
    ul,li {    list-style: none;    }

    ul {
        height: 200px;
        background-color: #C3BED4;
        /*實現居中*/
        text-align: center;
    }
    li {
        width: 100px;
        height: 100px;
        background-color: #EEEEFF;
        margin: 10px;
        /*變為行內塊元素，記住要去掉浮動。*/
        display: inline-block;
    }
</style>
<body>
    <ul>
        <li>我的數量不確定，但都會居中顯示。</li>
        <li>我的數量不確定，但都會居中顯示。</li>
    </ul>
</body>

方法2（flex）：
要居中的父元素設置display：flex和justify-content：center即可。
代碼示例：

<style>
    ul,li {    list-style: none;    }

    ul {
        height: 200px;
        background-color: #C3BED4;
        /*父元素變為flex彈性盒子實現內部子元素水平居中。*/
        display: flex;
        justify-content: center;
    }
    li {
        width: 100px;
        height: 100px;
        background-color: #EEEEFF;
        margin: 10px;
        float: left;
    }
</style>
<body>
    <ul>
        <li>我的數量不確定，但都會居中顯示。</li>
        <li>我的數量不確定，但都會居中顯示。</li>
    </ul>
</body>

1.4 塊元素（寬度不固定）居中

Markdown

方法1：
要居中的元素設置display：table，再設置margin：auto。
原理：
利用table元素有寬度自適應的特性，即不定義其寬度也不默認父元素body的寬度（table其寬度根據其內文本寬度決定）。因此可以看做一個定寬度塊元素，然后再利用定寬度塊狀居中的margin的方法，使其水平居中。
代碼示例：

<style>
    .father {
        border: 1px solid #376956;
        overflow: hidden;
        /*下面兩個組合實現沒有寬度的塊元素水平居中。*/
        margin: 0 auto;
        display: table;
    }
    .son {
        width: 100px;
        height: 100px;
        background-color: #c3bed4;
        float: left;
        margin: 10px;
    }
</style>
<body>
    <div class="father">
        <div class="son">我的數量不確定，意味著父元素不能設置固定寬度。</div>
        <div class="son">我的數量不確定，意味著父元素不能設置固定寬度。</div>
    </div>
</body>

方法2：
給要居中的塊元素設置display：inline-block，再給其父元素設置text-align：center。原理：
沒有寬度的塊元素設置display：inline-block之后，其失去流體特性，寬度會由內在子元素撐開；然后將其視為行內元素的水平居中即可。
補充：
如果需要居中的元素是由數量不確定的文字撐開寬度的話，也可以給其設置display：inline；但如果是需要塊元素撐開寬度的話，設置這個屬性會失效，因為行內元素沒有寬高屬性，必須設置display：inline-block。所以這樣看來，使用這個方法設置為display：inline-block更全面。
代碼示例：

<style>
    .outer {
        width: 100%;
        /*實現內在行內元素水平居中*/
        text-align: center;
    }
    .father {
        border: 1px solid #376956;
        overflow: hidden;
        /*變為行內元素*/
        display: inline-block;
    }
    .son {
        width: 100px;
        height: 100px;
        background-color: #c3bed4;
        float: left;
        margin: 10px;
    }
</style>
<body>
    <div class="outer">
        <div class="father">
            <div class="son">我的數量不確定，意味著父元素不能設置固定寬度。</div>
            <div class="son">我的數量不確定，意味著父元素不能設置固定寬度。</div>
        </div>
    </div>
</body>

方法3：
要居中的元素加一個包裹層，設置float：left和position：relative、left：50%；然后要居中的元素設置position：relative、left：-50%即可。
補充：
設置為絕對定位也可以。
代碼示例：

<style>
    .outer {
        /*設置這個之后，就會失去流體特性，然后把子元素包裹起來*/
        float: left;
        /*父元素相對定位向右偏移50%*/
        position: relative;
        left: 50%;
    }
    .father {
        border: 1px solid #376956;
        overflow: hidden;
        /*本身相對定位，然后相對父元素向左偏移50%*/
        position: relative;
        left: -50%;
    }
    .son {
        width: 100px;
        height: 100px;
        background-color: #c3bed4;
        float: left;
        margin: 10px;
    }
</style>
<body>
    <div class="outer">
        <div class="father">
        <div class="son">我的數量不確定，意味著父元素不能設置固定寬度。</div>
        <div class="son">我的數量不確定，意味著父元素不能設置固定寬度。</div>
    </div>
</body>

2 垂直居中

2.1 單行文本（父元素高度確定）

方法：
設置父元素的line-height = height即可。

2.2 多行文本（父元素高度確定）

Markdown

方法1：
塊級元素（包含文本的父元素）設置display：table-cell，再設置vertical-aligh：middle即可。
代碼示例：

<style>
    ul {
        height: 200px;
        background-color: #C3BED4;
        /*實現多行文本垂直居中*/
        display: table-cell;
        vertical-align: middle;
    }
</style>
<body>
    <ul>
        <li>我可以增加，只要不超過父元素的高度，都會垂直居中。</li>
        <li>我可以增加，只要不超過父元素的高度，都會垂直居中。</li>
    </ul>
</body>

方法2（flex）：
要居中元素的父元素設置display：flex、flex-direction：column和justify-content：center，變為彈性盒子，然后改變主軸方向再居中即可。
代碼示例：

<style>
    ul {
        height: 200px;
        background-color: #C3BED4;
        /*變為flex彈性盒子，實現多行文本垂直居中*/
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
</style>
<body>
    <ul>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco
    </ul>
</body>

2.3 塊元素（高度確定）

Markdown

方法：
要居中元素的父元素設置相對定位；自己設置絕對定位，top：50%（向下的位移是父元素高度的一半），margin設為自身高度一半的負值即可。。
代碼示例：

<style>
    * {margin: 0;padding: 0;}
    ul,li{list-style:none;}
    ul {
        height: 200px;
        background-color: #C3BED4;

        position: relative;
    }
    li {
        height: 50px;
        background-color: #eeeeff;
        /*下面三行實現居中*/
        position: absolute;
        /*上的位移為父元素高度的一半。*/
        top: 50%;
        /*自己高度的一半。*/
        margin-top: -25px;
    }
</style>
<body>
    <ul>我是父元素
        <li>我是高度確定、需要垂直居中的塊元素。
        </li>
    </ul>
</body>

2.4 塊元素（高度不確定）

Markdown

方法1（transform）：
要居中元素的父元素設置相對定位；自己設置絕對定位，top：50%（向下的位移是父元素高度的一半），transform：translateY（-50%）即可。
代碼示例：

<style>
    * {margin: 0;padding: 0;}
    ul,li{list-style:none;}

    ul {
        height: 200px;
        background-color: #C3BED4;

        position: relative;
    }
    li {
        background-color: #eeeeff;

        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
</style>
<body>
    <ul>
        <li>我是高度不確定、需要垂直居中的塊元素。
        </li>
    </ul>
</body>

方法2（flex）：
使父元素變為彈性盒子。父元素設置display：flex、flex-direction：column和justify-content：center，即可。
代碼示例：

<style>
    * {margin: 0;padding: 0;}
    ul,li{list-style:none;}

    ul {
        height: 200px;
        background-color: #C3BED4;
        /*父元素變為彈性盒子，實現垂直居中。*/
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    li {
        background-color: #eeeeff;
    }
</style>
<body>
    <ul>
        <li>我是高度不確定、需要垂直居中的塊元素。
        </li>
    </ul>
</body>

3 水平且垂直居中

3.1 塊元素（寬高固定）

Markdown

方法1：
父元素設置相對定位；要居中的元素絕對定位，top和left值均為50%，然后margin值設為自身寬高一半的負值即可。
方法2：
父元素設置相對定位；要居中的元素絕對定位，四個方向的位移均設置為0，再margin：auto即可。
代碼示例：

<style>
    * {margin: 0;padding: 0;}
    ul,li{list-style:none;}

    ul {
        height: 200px;
        background-color: #C3BED4;

        position: relative;
    }
    li {
        background-color: #eeeeff;
        width: 100px;
        height: 100px;
        /*實現絕對定位，重點是margin的應用。*/
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
</style>
<body>
    <ul>
        <li>
        </li>
    </ul>
</body>

3.2 塊元素（寬高不固定 ）

Markdown

方法1（transform）：
父元素設為相對定位；要居中的元素絕對定位，top和left值均設為50%，再設置transform：translate（-50%，-50%）即可。
補充：
使用 transform 有一個缺陷，就是當計算結果含有小數時（比如 0.5），會讓整個元素看起來是模糊的，一種解決方案就是為父級元素設置 transform-style: preserve-3d。
代碼示例：

<style>
    * {margin: 0;padding: 0;}
    ul,li{list-style:none;}

    ul {
        height: 200px;
        background-color: #C3BED4;

        position: relative;
    }
    li {
        background-color: #eeeeff;
        /*實現水平&垂直居中*/
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>
<body>
    <ul>
        <li>我是寬高不確定、需要水平垂直同時居中的塊元素。
        </li>
    </ul>
</body>

方法2（flex）：
要居中元素的父元素設置display：flex和justify-content：center和aligh-items：center即可。
代碼示例：

<style>
    * {margin: 0;padding: 0;}
    ul,li{list-style:none;}

    ul {
        height: 200px;
        background-color: #C3BED4;
        /*父元素變為彈性盒子，實現垂直&水平居中。*/
        display: flex;
        justify-content: center;
        align-items: center;
    }
    li {
        background-color: #eeeeff;
    }
</style>
<body>
    <ul>
        <li>我是寬高不確定、需要水平垂直同時居中的塊元素。
        </li>
    </ul>
</body>

結語

文章整理于自己的學習筆記，多為個人理解，僅供參考；如有真知灼見，歡迎交流。

文章始發于http://www.lipengcheng.xyz 如需轉載，請注明出處，謝謝。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,815評論 1贊 92
  • 移動開發基本知識點 一.使用rem作為單位 html { font-size: 100px; } @media(m...
    橫沖直撞666閱讀 3,521評論 0贊 6
  • H5移動端知識點總結 閱讀目錄 移動開發基本知識點 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇閱讀 4,634評論 0贊 26
  • 收聽音頻,戳鏈接,舊號itclan已暫停使用,歡迎關注微信itclanCoder公眾號可收聽更多音頻 前言 關于網...
    itclanCoder閱讀 8,216評論 3贊 30
  • 1 var s = null; alert(typeof(s)) // object 2 jquer...
    浮生小孟閱讀 187評論 1贊 0