成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

taohonghui / 1926人閱讀

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

討論前提

本文都是基于這樣的HTML結(jié)構(gòu)來進(jìn)行討論的：


    
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上設(shè)置了text-align: center，因此child里的元素都會繼承這個text-align: center，需要重新設(shè)置個text-align: left來reset一下。

display: table/block + margin

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

.child{
    display: table; //display: block;
    margin: 0 auto;
}
垂直居中 表格單元特性（table-cell）：table-cell + vertical-align 
.parent{
    display: table-cell;
    vertical-align: middle;
}

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

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

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

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

parent設(shè)置relative關(guān)系倒不大，但是child變absolute就脫離文檔流了。
.parent {

position: relative;

}

.child {

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

}

負(fù)margin的替代方案：absolute + transform

從上文可知，負(fù)margin方案的問題在于要確定width和height，無法做到自適應(yīng)；于是，為了要做到自適應(yīng)，我們可以把負(fù)margin換成transform實(shí)現(xiàn)child自身的偏移。

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

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

flex + justify-content + align-items

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

.parent{
    display: flex;
    justify-content: center;    //水平居中，相當(dāng)于text-align
    align-items: center;    //垂直居中，相當(dāng)于vertical-align
}
文本式終極居中： inline-block + text-align + table-cell + vertical-align 
.parent{
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.child{
    display: inline-block;
}

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

參考文章

Absolute Horizontal And Vertical Centering In CSS

盤點(diǎn)8種CSS實(shí)現(xiàn)垂直居中水平居中的絕對定位居中技術(shù)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115043.html

相關(guān)文章

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

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

    Scholer 評論0 收藏0

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

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

    mayaohua 評論0 收藏0

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

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

    Apollo 評論0 收藏0

  • 【前端】這可能是你看過最全的css居中解決方案了~

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

    csRyan 評論0 收藏0

  • 【前端】這可能是你看過最全的css居中解決方案了~

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

    Simon 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<