水平、垂直居中布局方案整理

taohonghui 發布于2019-08-30 12:45 / 1920人閱讀

摘要：水平居中，相當于垂直居中，相當于文本式終極居中很容易便能看出，這其實是水平居中方案以及垂直居中方案的合用，也算是把文本排版的特性都利用了個遍了。

討論前提

本文都是基于這樣的HTML結構來進行討論的：


    DEMO

水平居中 inline-block：inline-block + text-align

    .parent{
        text-align: center;
    }
    .child{
        display: inline-block;
    }

inline-block是個很特殊的屬性，既有inline文本的特性，又有block布局的特性；因此，用上inline-block，既可以讓div像文本一樣居中（text-align: center;），又不會影響div本身的寬高。
這個方案有個缺陷，就是由于在parent上設置了text-align: center，因此child里的元素都會繼承這個text-align: center，需要重新設置個text-align: left來reset一下。

display: table/block + margin

這種方法非常常用，適用于需要用position:static把盒子撐起來的情況下的水平居中。但值得注意的是，使用block的話，child的默認寬度會撐滿整個parent，因此需要顯式地定義其width；而使用table的話，其默認寬度為child的內容寬度，這樣一來，即使加上padding和border，也能順利實現水平居中，在實際場景中是比block要好用的。

.child{
    display: table; //display: block;
    margin: 0 auto;
}

垂直居中 表格單元特性（table-cell）：table-cell + vertical-align

.parent{
    display: table-cell;
    vertical-align: middle;
}

這個方案可能有一點費解，畢竟表格布局已經是上世紀的布局方式了，但當時布局所用到的一些特性，還一直被瀏覽器兼容著，其中就包括這個table-cell的方案。
從某種意義上來看，跟inline-block方案很相像，都是利用了文本排版的特性，但差別在于，本方案并不需要把child設置為inline-block也可生效。

水平、垂直同時居中 負值的margin：absolute + margin

這種方法也比較常用，先利用positions: absolute;left: 50%的特性，使child的左側移至parent的水平中央處，然后再施以負的margin-left使child水平左移child寬度的一半距離，即最終使child的水平中央與parent的水平中央重合；在垂直方向上，也是一樣的原理。
這個方法用起來不復雜，原理也很容易理解，但是缺點也非常明顯：

要求child的寬度必須是固定的，而這在如今響應式布局橫行的時代，似乎是有點過時了。

parent設置relative關系倒不大，但是child變absolute就脫離文檔流了。
.parent {

position: relative;

}

.child {

width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;    //為width的一半，且為負值
margin-top: -100px;    //為height的一半，且為負值

}

負margin的替代方案：absolute + transform

從上文可知，負margin方案的問題在于要確定width和height，無法做到自適應；于是，為了要做到自適應，我們可以把負margin換成transform實現child自身的偏移。

.parent{
    position: relative;
}
.child{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

由于transform這一屬性在設置百分比類型的值時，其參照對象是自身，因此只需要各設置50%，就能實現往水平方向偏移自身寬度的一半，又或者是往垂直方向偏移自身高度的一半。
總體來說，這個方案靈活是夠靈活的了，但是transform的兼容性堪憂，移動端還好說，PC端怎么敢用？

flex + justify-content + align-items

跟上文的transform方案想必，flex（彈性盒子）的方案兼容性就更令人擔憂了，PC端不要鬧了，連移動端要兼容起來也很麻煩，基本上是只能使用老版的彈性盒子了。

.parent{
    display: flex;
    justify-content: center;    //水平居中，相當于text-align
    align-items: center;    //垂直居中，相當于vertical-align
}

文本式終極居中： inline-block + text-align + table-cell + vertical-align

.parent{
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.child{
    display: inline-block;
}

很容易便能看出，這其實是inline-block水平居中方案以及table-cell垂直居中方案的合用，也算是把文本排版的特性都利用了個遍了。

參考文章

Absolute Horizontal And Vertical Centering In CSS

盤點8種CSS實現垂直居中水平居中的絕對定位居中技術

云服務器 GPU云服務器水平垂直居中水平居中布局垂直居中實現垂直居中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115043.html

【基礎】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內聯元素水平居中利用可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素內聯塊內聯表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內聯元素垂直居中通過設置內聯元素的高度和行高相等，從而使元素垂直居中。簡言 CSS居中是前端工程師經常要面對的問題，也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

Scholer 2019-08-02 16:14 評論0 收藏0
【基礎】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內聯元素水平居中利用可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素內聯塊內聯表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內聯元素垂直居中通過設置內聯元素的高度和行高相等，從而使元素垂直居中。簡言 CSS居中是前端工程師經常要面對的問題，也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

mayaohua 2019-08-29 18:44 評論0 收藏0
【基礎】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內聯元素水平居中利用可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素內聯塊內聯表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內聯元素垂直居中通過設置內聯元素的高度和行高相等，從而使元素垂直居中。簡言 CSS居中是前端工程師經常要面對的問題，也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

Apollo 2019-08-30 14:15 評論0 收藏0
【前端】這可能是你看過最全的css居中解決方案了~

摘要：水平居中行內元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個屬性為的父級元素中如設置這個父級元素屬性即可現在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內元素解決方案適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...

csRyan 2019-08-30 13:54 評論0 收藏0
【前端】這可能是你看過最全的css居中解決方案了~

摘要：水平居中行內元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個屬性為的父級元素中如設置這個父級元素屬性即可現在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內元素解決方案適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...

Simon 2019-08-01 18:31 評論0 收藏0