看看你懂這些水平垂直居中嗎

css 水平垂直居中實現方式

css中有好多實現居中的方式，在項目中常常不知道使用哪一種方式會比較好，因此記錄下來。
複製代碼

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

行內元素html結構

<div class="outer">
    <span class="inner"></span>
  </div>
複製代碼

塊級元素結構

<div class="outer">
    <div class="inner"></div>
  </div>
複製代碼

基礎樣式

<style>
.outer {
    width: 400px;
    height: 400px;
    border: 1px solid red;
}
.outer .inner {
    width: 50px;
    height: 50px;
    border: 1px solid blue;
}
</style>
複製代碼

水平居中

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結構

<div class="outer">
    <div class="inner"></div>
    <div class="sibling"></div>
  </div>

複製代碼

.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中的知識，^_^