CSS：布局 - 水平垂直居中

JerryC 發(fā)布于2019-08-29 11:05 / 2325人閱讀

摘要：絕對定位負(fù)原理首先利用定位把容器塊左頂角對準(zhǔn)瀏覽器中心，然后再使用負(fù)把容器塊向左移動自身寬度的一半，向上移動自身高度的一半，即可以把容器塊的中心移到瀏覽器中心。

1. 絕對定位 + 負(fù) Margin

原理：首先利用 absolute 定位把容器塊 左頂角 對準(zhǔn)瀏覽器中心，然后再使用負(fù) margin 把容器塊向左移動自身寬度的一半，向上移動自身高度的一半，即可以把容器塊的中心移到瀏覽器中心。

優(yōu)點(diǎn)：兼容性好
缺點(diǎn)：需要知道寬高，不夠靈活

.container {
    width: 600px; 
    height: 400px;
    position: absolute; 
    left: 50%; 
    top: 50%;
    margin-left: -300px;    /* 寬度的一半 */
    margin-top: -200px;     /* 高度的一半 */
}

2. 絕對定位 + Transform

原理：首先利用 absolute 定位把容器塊 左頂角 對準(zhǔn)瀏覽器中心，然后再使用 CSS3 transform 的 translate(x,y) 把容器塊向左(x)移動自身寬度的一半，向上(y)移動自身高度的一半，即可以把容器塊的中心移到瀏覽器中心。

優(yōu)點(diǎn)：不需要知道寬高，靈活
缺點(diǎn)，兼容不好，在移動設(shè)備上建議使用

.container {
    width: 600px;
    height: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* 自身尺寸的一半 */
}

3. 絕對定位 + 自動 Margin

原理：瀏覽器自動計(jì)算絕對定位的容器塊上下左右外邊距。
優(yōu)點(diǎn)：靈活切兼容性好（IE8+）
缺點(diǎn)：適用于本身有尺寸的元素（比如圖片），對于段落等必須顯式設(shè)置其寬高

.container {
    width: 600px;
    height: 400px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

4. CSS3 Flexbox

優(yōu)點(diǎn)：不需要知道寬高
缺點(diǎn)：兼容性不好，在移動設(shè)備上建議使用

.container {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}

5. Table display

優(yōu)點(diǎn)：兼容性好
缺點(diǎn)：增加了無用的 HTML 結(jié)構(gòu)

.vertical-wrapper {
    width: 100%;
    height: 100%;
    display: table;
    .vertical {
        display: table-cell;
        vertical-align: middle;
        & > * {
            vertical-align: middle;
        }
        span {
            display: inline-block;
        }
        img {
            display: inline-block;
        }
    }
    &.center {
        .vertical {
            text-align: center;
        }
    }
}

云服務(wù)器 GPU云服務(wù)器水平垂直居中水平居中布局垂直居中實(shí)現(xiàn)垂直居中

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

轉(zhuǎn)載請注明本文地址：http://hztianpu.com/yun/111416.html

相關(guān)文章

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

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

Hydrogen 2019-08-29 16:56 評論0 收藏0
如何居中一個(gè)元素（終結(jié)版）

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

hlcc 2019-08-02 11:43 評論0 收藏0
如何居中一個(gè)元素（終結(jié)版）

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

Meils 2019-08-23 12:20 評論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)常要面對的問題，也是基本技能之一。今天有時(shí)間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

Apollo 2019-08-30 14:15 評論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)常要面對的問題，也是基本技能之一。今天有時(shí)間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

Scholer 2019-08-02 16:14 評論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)常要面對的問題，也是基本技能之一。今天有時(shí)間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

mayaohua 2019-08-29 18:44 評論0 收藏0