css 水平垂直居中實現方式

Shihira 發布于2019-08-30 14:17 / 2122人閱讀

摘要：水平垂直居中實現方式中有好多實現居中的方式，在項目中經常不知道使用哪種方式會比較好，所以記錄下來。塊級元素為內部元素設置為，將它轉換為行內元素，再對父元素使用可以實現水平居中，缺點就是內部元素無法設置寬度。

css 水平垂直居中實現方式

css中有好多實現居中的方式，在項目中經常不知道使用哪種方式會比較好，所以記錄下來。

水平垂直居中包括行內元素居中，以及塊級元素居中

行內元素html結構

塊級元素結構

基礎樣式

水平居中 1-行內元素（最簡單 text-align: center）

.outer {
    text-align: center;
}

1-塊級元素（margin: auto）

當使用這種方式時，內部元素必須定義寬度，不然margin屬性會無效

.outer .inner {
    margin: auto;
}

2-塊級元素（margin: auto + display: table）

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

.outer .inner {
    margin: auto;
    display: table;
}

3-塊級元素（display: inline）

為內部元素設置display 為inline，將它轉換為行內元素，再對父元素使用text-align: center 可以實現水平居中，缺點就是內部元素無法設置寬度。

.outer {
    text-align: center;
}
.outer .inner {
    display: inline;
}

4-塊級元素（display: inline-block）

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

.outer {
    text-align: center;
}
.outer .inner {
    display: inline-block;
}

5-塊級元素（float: left + transform）

這種方式不需要知道內部元素寬度。

.outer .inner {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

6-塊級元素（負邊距+絕對定位）

.outer {
    position: relative;
}
.outer .inner {
    position: absolute;
    left: 50%;
    margin-left: -25px;
}

7-塊級元素（flexbox）

用的最多的方式，但低版本瀏覽器會有兼容問題

.outer {
    display: flex;
    justify-content: center;  // 主軸上居中
}

垂直居中 1-行內元素（line-height）

外部元素設置line-height

.outer {
    line-height: 400px;
}

1-塊級元素（absolute + top + margin-top）

使用絕對定位將內部元素的頂部定位在中間，再通過margin-top 負值拉回高度，需要提前知道內部元素的高度

.outer {
    position: relative;
}
.outer .inner {
    position: absolute;
    top: 50%;
    margin-top: -25px;
}

2-塊級元素（absolute + margin:auto）

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

.outer {
    position: relative;
}
.outer .inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

3-塊級元素（relative + transform）

前面水平居中的時候也出現過這種方式，也可以使用position: absolute方式，但要對應地將外部元素設置成position: relative

.outer .inner {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

4-塊級元素（vertical-align + table-cell）

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

5-塊級元素（vertical-align + inline-block）

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

html結構

.outer .inner {
    vertical-align: middle;
    display: inline-block;
}
.outer .slibing {
    height: 400px;
    display: inline-block;
    vertical-align: middle;
}

5-塊級元素（偽元素）

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

.inner {
    display: inline-block;
    vertical-align: middle;
}
.outer::before {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

6-塊級元素（flexbox）

.outer {
    display: flex;
    align=items: center;
}

歡迎繼續補充~

如果喜歡請關注我的Blog，給個Star吧，會定期分享一些JS中的知識，^_^

云服務器 GPU云服務器水平垂直居中實現垂直居中垂直居中文字垂直居中

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

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

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

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

Apollo 2019-08-30 14:15 評論0 收藏0
【基礎】這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
如何居中一個元素（終結版）

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

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

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

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

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

Meils 2019-08-23 12:20 評論0 收藏0