L - 居中布局

coolpail 發(fā)布于2019-08-30 14:22 / 780人閱讀

摘要：水平居中先給出結(jié)構(gòu)我是子元素方法將子元素轉(zhuǎn)換為行內(nèi)元素將子元素設(shè)置為這樣既可以像塊元素一樣設(shè)置盒模型，又可以像行內(nèi)元素一樣試用進(jìn)行居中將子元素設(shè)置為后，子元素為塊級元素，寬度為內(nèi)容寬度方法將子元素轉(zhuǎn)換為元素是塊級元素，寬度自適

水平居中

先給出HTML結(jié)構(gòu)

    
        我是子元素

方法1. 將子元素轉(zhuǎn)換為行內(nèi)元素

    .par{
        text-align: center;
    }
    .child{
        background-color: tomato;
            
        display:inline-block;
    }

將子元素設(shè)置為inline-block這樣既可以像塊元素一樣設(shè)置盒模型，又可以像行內(nèi)元素一樣試用text-align：center進(jìn)行居中

將子元素設(shè)置為inline-block后，子元素為塊級元素，寬度為內(nèi)容寬度

方法2. 將子元素轉(zhuǎn)換為table

    .par{

    }
    .child{
        background-color: tomato;
            
        display:table;
        margin:0 auto;
    }

table元素是塊級元素，寬度自適應(yīng)為內(nèi)容寬度，所以通過display:table對子元素進(jìn)行轉(zhuǎn)換并設(shè)置塊元素居中標(biāo)配margin:0 auto

方法3. 使用position+transform組合

    .par{
        position: relative;
    }
    .child{
        background-color: tomato;
        width:300px;

        position: absolute;
        left:50%;
        transform: translateX(-50%);
    }

由于子元素是個塊級元素(div)，默認(rèn)占滿父元素寬度，所以我們將子元素寬度設(shè)為300px

原理很簡單，先用絕對定位將子元素置于距父元素左邊界一半的位置，然后再將子元素向左移動自身的一半，達(dá)到居中效果

注意，position:relative將父元素設(shè)為子元素絕對定位的參照物

方法4. 利用flex布局的justify-content

    .par{
        display:flex;
        justify-content: center;
    }
    .child{
        background-color: tomato;
    }

由于flex-grow屬性默認(rèn)值為0，flex-basis屬性默認(rèn)值為auto，所以寬度為內(nèi)容寬度(在沒有設(shè)置指定值時，否則為指定值)

順便說一句，flex很強(qiáng)大

垂直居中

高度為元素高度，就不指定具體值了

方法1. 父元素轉(zhuǎn)換為table-ceil

    .par{
        height:500px;

        display:table-cell;
        vertical-align:middle;
    }
    .child{
        background-color: tomato;
    }

子元素寬度為內(nèi)容寬度，父元素寬度為子元素寬度

方法2. 利用position+transform組合

    .par{
        height:500px;

        position: absolute;
    }
    .child{
        background-color: tomato;
        width:300px;
        
        position: absolute;
        top:50%;
        transform: translateY(-50%);
    }

不指定子元素寬度的話，子元素的內(nèi)容將縱向展示

方法3. 使用flex布局的align-items

    .par{
        height:500px;

        display:flex;
        align-items:center;
    }
    .child{
        background-color: tomato;
        width:300px;
    }

水平垂直居中

上述兩種居中布局的結(jié)合

方法1. 使用inline-block+text-align+table-cell+vertical-align

    .par{
        width:500px;
        height:500px;
        border:1px solid #ccc;

        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }
    .child{
        background-color: tomato;
        width:300px;

        display:inline-block;
    }

方法2. 利用position+transform組合

    .par{
        width:500px;
        height:500px;
        border:1px solid #ccc;

        position: relative;
    }
    .child{
        background-color: tomato;
        width:300px;

        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
    }

方法3. 使用flex布局

    .par{
        width:500px;
        height:500px;
        border:1px solid #ccc;

        display:flex;
        justify-content: center;
        align-items: center;
    }
    .child{
        background-color: tomato;
        width:300px;
    }

有問題歡迎提問，實踐出真知