国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css 水平垂直居中實(shí)現(xiàn)方式

Shihira / 2107人閱讀

摘要：水平垂直居中實(shí)現(xiàn)方式中有好多實(shí)現(xiàn)居中的方式，在項(xiàng)目中經(jīng)常不知道使用哪種方式會(huì)比較好，所以記錄下來。塊級(jí)元素為內(nèi)部元素設(shè)置為，將它轉(zhuǎn)換為行內(nèi)元素，再對(duì)父元素使用可以實(shí)現(xiàn)水平居中，缺點(diǎn)就是內(nèi)部元素?zé)o法設(shè)置寬度。

css 水平垂直居中實(shí)現(xiàn)方式 
css中有好多實(shí)現(xiàn)居中的方式，在項(xiàng)目中經(jīng)常不知道使用哪種方式會(huì)比較好，所以記錄下來。

水平垂直居中包括行內(nèi)元素居中，以及塊級(jí)元素居中

行內(nèi)元素html結(jié)構(gòu)

塊級(jí)元素結(jié)構(gòu)

基礎(chǔ)樣式

水平居中 1-行內(nèi)元素（最簡(jiǎn)單 text-align: center） 
.outer {
    text-align: center;
}
1-塊級(jí)元素（margin: auto）

當(dāng)使用這種方式時(shí)，內(nèi)部元素必須定義寬度，不然margin屬性會(huì)無效

.outer .inner {
    margin: auto;
}
2-塊級(jí)元素（margin: auto + display: table）

前面這種方式需要為內(nèi)部元素定義寬度，如果不想定義寬度，可以設(shè)置內(nèi)部元素的display 為 table，它的寬度會(huì)由內(nèi)部元素來撐開。

.outer .inner {
    margin: auto;
    display: table;
}
3-塊級(jí)元素（display: inline）

為內(nèi)部元素設(shè)置display 為inline，將它轉(zhuǎn)換為行內(nèi)元素，再對(duì)父元素使用text-align: center 可以實(shí)現(xiàn)水平居中，缺點(diǎn)就是內(nèi)部元素?zé)o法設(shè)置寬度。

.outer {
    text-align: center;
}
.outer .inner {
    display: inline;
}
4-塊級(jí)元素（display: inline-block）

方案三無法為內(nèi)部元素設(shè)置寬度，但是采用inline-block，則可以為內(nèi)部元素設(shè)置寬度。

.outer {
    text-align: center;
}
.outer .inner {
    display: inline-block;
}
5-塊級(jí)元素（float: left + transform）

這種方式不需要知道內(nèi)部元素寬度。

.outer .inner {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
6-塊級(jí)元素（負(fù)邊距+絕對(duì)定位） 
.outer {
    position: relative;
}
.outer .inner {
    position: absolute;
    left: 50%;
    margin-left: -25px;
}
7-塊級(jí)元素（flexbox） 
用的最多的方式，但低版本瀏覽器會(huì)有兼容問題
.outer {
    display: flex;
    justify-content: center;  // 主軸上居中
}
垂直居中 1-行內(nèi)元素（line-height）

外部元素設(shè)置line-height

.outer {
    line-height: 400px;
}
1-塊級(jí)元素（absolute + top + margin-top）

使用絕對(duì)定位將內(nèi)部元素的頂部定位在中間，再通過margin-top 負(fù)值拉回高度，需要提前知道內(nèi)部元素的高度

.outer {
    position: relative;
}
.outer .inner {
    position: absolute;
    top: 50%;
    margin-top: -25px;
}
2-塊級(jí)元素（absolute + margin:auto）

這種方式不需要知道內(nèi)部元素的高度，兼容性也很好

.outer {
    position: relative;
}
.outer .inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
3-塊級(jí)元素（relative + transform）

前面水平居中的時(shí)候也出現(xiàn)過這種方式，也可以使用position: absolute方式，但要對(duì)應(yīng)地將外部元素設(shè)置成position: relative

.outer .inner {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
4-塊級(jí)元素（vertical-align + table-cell） 
.outer {
    display: table-cell;
    vertical-align: middle;
}
5-塊級(jí)元素（vertical-align + inline-block）

原理是新建一個(gè)inner的兄弟元素，高度撐開整個(gè)容器，再對(duì)inner使用vertical-align: middle 使元素居中，不需要知道內(nèi)部元素的高度

html結(jié)構(gòu)

 

    

    

  


.outer .inner {
    vertical-align: middle;
    display: inline-block;
}
.outer .slibing {
    height: 400px;
    display: inline-block;
    vertical-align: middle;
}
5-塊級(jí)元素（偽元素）

原理和上面的方式一樣，只是通過偽元素去撐開高度

.inner {
    display: inline-block;
    vertical-align: middle;
}
.outer::before {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
6-塊級(jí)元素（flexbox） 
.outer {
    display: flex;
    align=items: center;
}

歡迎繼續(xù)補(bǔ)充~

如果喜歡請(qǐng)關(guān)注我的Blog，給個(gè)Star吧，會(huì)定期分享一些JS中的知識(shí)，^_^

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/115913.html

相關(guān)文章

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

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

    Apollo 評(píng)論0 收藏0

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

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

    Scholer 評(píng)論0 收藏0

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

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

    mayaohua 評(píng)論0 收藏0

  • 如何居中一個(gè)元素（終結(jié)版）

    摘要：源代碼演示利用將要水平排列的塊狀元素設(shè)為，然后在父級(jí)元素上設(shè)置，達(dá)到與上面的行內(nèi)元素的水平居中一樣的效果。 前言 本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導(dǎo)圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導(dǎo)圖，請(qǐng)猛戳Github個(gè)人博客 一、水平居中 1.行內(nèi)元素水平居...

    Hydrogen 評(píng)論0 收藏0

  • 如何居中一個(gè)元素（終結(jié)版）

    摘要：源代碼演示利用將要水平排列的塊狀元素設(shè)為，然后在父級(jí)元素上設(shè)置，達(dá)到與上面的行內(nèi)元素的水平居中一樣的效果。 前言 本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導(dǎo)圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導(dǎo)圖，請(qǐng)猛戳Github個(gè)人博客 一、水平居中 1.行內(nèi)元素水平居...

    hlcc 評(píng)論0 收藏0

  • 如何居中一個(gè)元素（終結(jié)版）

    摘要：源代碼演示利用將要水平排列的塊狀元素設(shè)為，然后在父級(jí)元素上設(shè)置，達(dá)到與上面的行內(nèi)元素的水平居中一樣的效果。 前言 本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導(dǎo)圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導(dǎo)圖，請(qǐng)猛戳Github個(gè)人博客 一、水平居中 1.行內(nèi)元素水平居...

    Meils 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Shihira

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<