css--元素居中常用方法總結

丶Serendipity丶發表於2021-11-13
CSS

前言

　　元素居中是日常開發和學習中最常見的問題，同時也是面試中經常考察的知識點，本文來總結一下這方面的知識點。

正文

　　1、水平居中

　　（1）子父元素寬度固定，子元素設定 margin：auto，並且子元素不能設定浮動，否則居中失效。

    <div class="wrap">
        <div class="inner"></div>
    </div>
    <style>
        .wrap {
            width: 500px;
            background-color: skyblue;
        }
        .inner {
            width: 200px;
            height: 100px;
            background-color: sandybrown;
            margin: auto;
        }
    </style>

　　（2）子父元素寬度固定，父元素設定 text-align：center，子元素設定display：inline-block，並且子元素不能設定浮動，否則居中失效。

    <div class="wrap">
        <div class="inner"></div>
    </div>
    <style>
        .wrap {
            width: 500px;
            background-color: skyblue;
            text-align: center;
        }

        .inner {
            width: 200px;
            height: 100px;
            display: inline-block;
            background-color: sandybrown;
        }
    </style>

2、水平垂直居中

　　（1）子父元素寬高度固定，子元素相對於父元素絕對定位(子絕父相)，子元素 top，left 設定 50%，子元素 margin-top 和 margin-left 減去各自寬高的一半或者 transform ：translate（-50%，-50%）。

    <div class="wrap">
        <div class="inner"></div>
    </div>
    <style>
        .wrap {
            width: 500px;
            height: 200px;
            background-color: skyblue;
            position: relative;
        }

        .inner {
            width: 200px;
            height: 100px;
            background-color: sandybrown;
            position: absolute;
            top: 50%;
            left: 50%;
            /* transform: translate(-50%, -50%); */
            margin-top: -50px;
            margin-left: -100px;
        }
    </style>

　　（2）子父元素寬高度固定，子元素相對於父元素絕對定位(子絕父相)，使用calc達到上面效果。

    <div class="wrap">
        <div class="inner"></div>
    </div>
    <style>
        .wrap {
            width: 500px;
            height: 200px;
            background-color: skyblue;
            position: relative;
        }
        .inner {
            width: 200px;
            height: 100px;
            background-color: sandybrown;
            position: absolute;
            top: calc(50% - 50px);
            left: calc(50% - 100px);

        }
    </style>

 　　（3）子父元素寬高度固定，子元素相對於父元素絕對定位(子絕父相)，子元素上下左右全為 0，然後設定子元素margin：auto。

    <div class="wrap">
        <div class="inner"></div>
    </div>
    <style>
        .wrap {
            width: 500px;
            height: 200px;
            background-color: skyblue;
            position: relative;
        }
        .inner {
            width: 200px;
            height: 100px;
            background-color: sandybrown;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
    </style>

 　　（4）子元素相對定位，子元素 top，left 值為 50%，transform：translate（-50%，-50%）。

    <div class="wrap">
        <div class="inner"></div>
    </div>
    <style>
        .wrap {
            width: 500px;
            height: 200px;
            background-color: skyblue;
        }
        .inner {
            width: 200px;
            height: 100px;
            background-color: sandybrown;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>

 　　（5）文字水平垂直居中 父元素設定text-algin:center使得子元素水平居中，子元素設定line-height為父元素高度，使得子元素垂直居中。

    <div class="wrap">
        <span class="inner">321311111111111111</span>
    </div>
    <style>
        .wrap {
            width: 500px;
            height: 200px;
            text-align: center;
            background-color: skyblue;
        }

        .inner {
            line-height: 200px;
            background-color: sandybrown;
        }
    </style>

　　（6）利用line-height，vertical-align實現元素水平垂直居中。

    <div class="wrap">
        <div class="inner">321</div>
    </div>
    <style>
        .wrap {
            width: 500px;
            height: 200px;
            background-color: skyblue;
            line-height: 200px;
            text-align: center;
        }
        .inner {
            width: 200px;
            height: 100px;
            background-color: sandybrown;
            display: inline-block;/* 將子元素設定為行內塊級元素 */
            vertical-align: middle;/* 垂直居中 */
            text-align: left;/* 預設繼承了父元素的水平居中，這裡需要修正修正文字 */
        }
    </style>

 　　（7）父元素設定彈性盒子，display：flex； justfy-content：center ；align-item：center。

    <div class="wrap">
        <div class="inner"></div>
    </div>
    <style>
        .wrap {
            width: 500px;
            height: 200px;
            background-color: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .inner {
            width: 200px;
            height: 100px;
            background-color: sandybrown;
        }
    </style>

 　　（8）父元素設定 display：table-cell vertical-align：middle，子元素設定 margin：auto。

    <div class="wrap">
        <div class="inner"></div>
    </div>
    <style>
        .wrap {
            width: 500px;
            height: 200px;
            background-color: skyblue;
            display: table-cell;
            vertical-align: middle
        }
        .inner {
            width: 200px;
            height: 100px;
            background-color: sandybrown;
            margin: auto;
        }
    </style>

　　（9）網格佈局實現水平垂直居中display: grid;place-items: center。

    <div class="wrap">
        <div class="inner"></div>
    </div>
    <style>
        .wrap {
            width: 500px;
            height: 200px;
            background-color: skyblue;
            display: grid;
            place-items: center;
        }

        .inner {
            width: 200px;
            height: 100px;
            background-color: sandybrown;
        }
    </style>

寫在最後

　　以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長之路會持續更新一些工作中常見的問題和技術點。

 

相關文章