各種居中方案

Shapeying發表於2018-12-28

元素居中是常見的場景，此頁為總結各種實現方式

水平居中

內聯元素（inline,inline-block等），將父元素的text-align屬性設為center。

text-align CSS屬性定義行內內容（例如文字）如何相對它的塊父元素對齊。

塊級元素（block等），設定margin-left,margin-right為auto,此時左右外邊距會平分水平方向的多餘空間，實現居中。注意塊級元素要有固定寬度，否則會鋪滿父元素，佔據100%寬度。

/* 內聯元素 */
.inline-center-parent{
    text-align:center;
}

/* 塊級元素 */
.block-center{
    width:60%;
    margin: 0 auto;
}

垂直居中

相對於水平居中，垂直居中實現稍微複雜一些

內聯元素的垂直居中

如果是單行時，設定元素了的line-height與父元素的height一致即可，line-height會繼承，設定在父元素上也一樣。

    /*容器樣式*/
    .inline-center-parent{
        height: 100px;
        line-height: 100px;
    }

多行時，上面的樣式就會出現問題，因為每行的高度都和容器高度一樣，會溢位，此時可以使用table-cell來實現居中。

    /*容器樣式*/
    .inline-center-parent{
        display: table-cell;
        vertical-align: middle; // 設定垂直居中
    }

也可以將多行內聯元素用塊級元素包裹，然後就變成了塊級元素的居中問題。

塊級元素的垂直居中

  1. 垂直居中可以使用絕對定位處理，top設為50%（top以容器的高度計算百分比），然後再想辦法讓塊元素向上移動自身的一半
  • 如果是固定高度
    .block-center-parent {
        position:relative;
    }

    .block-center {
        position:absolute;
        top:50%;
        height:100px;
        margin-top:-50px; // margin-top為負值，且為高度的一半
    }
  • 如果是高度不固定

一個思路是通過transform變化（tranform平移以自身寬高進行計算），向上移動自身的一半

    .block-center {
        position:absolute;
        top:50%;
        transform: translateY(-50%);
    }

另一個思路是通過margin:auto,沒錯！垂直居中也可以使用margin:auto來實現。

    .block-center {
        position:absolute;
        top:0;
        left:0;
        bottom:0;
        right:0;
        height: max-content; 
        width: max-content;
        margin:auto;
    }

margin-top,margin-bottom在普通情況下，設定為auto時，預設為0；但是絕對定位脫離文件流，又通過top,left,bottom,right指定子元素的邊界後，子元素會預設填充整個容器，此時margin：auto會讓垂直方向上也平分多餘空間。注意需要指定height和width，否則height和width會填充滿整個空間，margin均為0；

  1. 使用flex
    flex應該是最便捷方式
    .block-center-parent {
        display:flex; 
        align-items:center; // 規定了交叉軸的對齊方式（預設情況下，垂直方向為交叉軸） 
    }

垂直水平居中

上面的一些方式可以同時實現水平居中和垂直居中。

  1. display: absolute + margin:auto
    .block-center {
        position:absolute;
        top:0;
        left:0;
        bottom:0;
        right:0;
        height: max-content; 
        width: max-content;
        margin:auto;
    }
  1. display: absolute + transfrom
    /* 水平方向也使用transform */
    .block-center {
        position:absolute;
        top:50%;
        left:50%;
        transform: translateY(-50%);
        transform: translateX(-50%);
    }
  1. display:flex
    .block-center-parent {
        display:flex; 
        justify-content:center; // 規定了主軸的對齊方式
        align-items:center; // 規定了交叉軸的對齊方式
    }

另一種方式是

    .block-center-parent {
        display:flex; 
    }
    .block-center {
        margin:auto;
    }

相關文章