L – 居中佈局

None_發表於2018-04-06

水平居中

先給出HTML結構

    <div class="par">
        <div class="child">我是子元素</div>
    </div>

方法1. 將子元素轉換為行內元素

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

將子元素設定為inline-block這樣既可以像塊元素一樣設定盒模型，又可以像行內元素一樣試用text-align：center進行居中

將子元素設定為inline-block後，子元素為塊級元素，寬度為內容寬度

方法2. 將子元素轉換為table

    .par{

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

table元素是塊級元素，寬度自適應為內容寬度，所以通過display:table對子元素進行轉換並設定塊元素居中標配margin:0 auto

方法3. 使用position+transform組合

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

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

由於子元素是個塊級元素(div)，預設佔滿父元素寬度，所以我們將子元素寬度設為300px

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

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

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

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

由於flex-grow屬性預設值為0，flex-basis屬性預設值為auto，所以寬度為內容寬度(在沒有設定指定值時，否則為指定值)

順便說一句，flex很強大

垂直居中

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

方法1. 父元素轉換為table-ceil

    .par{
        height:500px;

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

子元素寬度為內容寬度，父元素寬度為子元素寬度

方法2. 利用position+transform組合

    .par{
        height:500px;

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

不指定子元素寬度的話，子元素的內容將縱向展示

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

    .par{
        height:500px;

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

水平垂直居中

上述兩種居中佈局的結合

方法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;
    }

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

相關文章