前言之爆錘面試官神器 - CSS

　　無論是實(shí)際開發(fā)中，亦或者是求職面試中，css 垂直居中往往都是一個(gè)繞不開的話題，其中不乏有許多面試者在多次雙重嘗受打擊之后，而沒有一個(gè)很好的反擊點(diǎn)，剛好結(jié)合自己以前受的委屈和痛苦，來給大家一個(gè)錘爆面試官大佬們的機(jī)會(huì)。

　　其實(shí)垂直居中主要分為了兩種類型：居中元素寬高已知 和 居中元素寬高未知，那么我們就結(jié)合這兩種類型來一一做舉例。

　　居中元素寬高已知

　　1. absolute + margin auto

　　顧名思義，就是利用當(dāng)前元素的 position: absolute; 和 margin: auto;

　　注意使用此方法：父元素與當(dāng)前元素的高度要設(shè)置;

　　通過將各個(gè)方向的距離都設(shè)置為 0，此時(shí)將 margin 設(shè)置為 auto，就可以實(shí)現(xiàn)垂直居中顯示了;

　　具體代碼如下：

　　.parent{

　　position: relative;

　　width: 90vw;

　　height: 90vh;

　　border: 3px solid steelblue;

　　}

　　.child{

　　background: tomato;

　　width: 50vw; height: 50vh;

　　/* 核心代碼 */

　　position:absolute;

　　top: 0; bottom: 0; left: 0; right: 0;

　　margin: auto;

　　}

　　具體效果如下：

　　1. absolute + 負(fù) margin

　　利用絕對(duì)定位百分比 50% 來實(shí)現(xiàn)，因?yàn)楫?dāng)前元素的百分比是基于相對(duì)定位(也就是父元素)來定位的;

　　然后再用負(fù)的 margin-top 和 margin-left 來進(jìn)行簡(jiǎn)單的位移即可，因?yàn)楝F(xiàn)在的負(fù) margin 是基于自身的高度和寬度來進(jìn)行位移的。

　　具體代碼如下：

　　.parent{

　　position:relative;

　　width: 90vw;

　　height: 90vh;

　　border: 3px solid steelblue;

　　}

　　.child{

　　background: tomato;

　　width: 100px; height: 100px;

　　/* 核心代碼 */

　　position:absolute;

　　top: 50%; left: 50%;

　　margin-top: -50px;

　　margin-left: -50px;

　　}

　　具體效果如下：

　　2， absolute + calc

　　使用 CSS3 的一個(gè)計(jì)算函數(shù)來進(jìn)行計(jì)算即可;方法與上面類似

　　具體代碼如下：

　　.parent{

　　width: 90vw;

　　height: 90vh;

　　border: 3px solid steelblue;

　　/* 核心代碼 */

　　position:relative;

　　}

　　.child{

　　background: tomato;

　　width: 200px; height: 200px;

　　/* 核心代碼 */

　　position:absolute;

　　top: calc(50% - 100px);

　　left: calc(50% - 100px);

　　}

　　具體效果如下：

　　居中元素寬高未知

　　3.absolute + transform

　　利用 CSS3 的新特性 transform;因?yàn)?transform 的 translate 屬性值如果是一個(gè)百分比，那么這個(gè)百分比將是基于自身的寬高計(jì)算出來的。

　　具體代碼如下：

　　.parent{

　　width: 90vw;

　　height: 90vh;

　　border: 3px solid steelblue;

　　/* 核心代碼 */

　　position:relative;

　　}

　　.child{

　　background: tomato;

　　/* 核心代碼 */

　　position:absolute;

　　top: 50%;

　　left: 50%;

　　transform: translate(-50%, -50%);

　　}

　　具體效果如下：

　　4.line-height + vertical-align

　　把當(dāng)前元素設(shè)置為行內(nèi)元素，然后通過設(shè)置父元素的 text-align: center; 實(shí)現(xiàn)水平居中;

　　同時(shí)通過設(shè)置當(dāng)前元素的 vertical-align: middle; 來實(shí)現(xiàn)垂直居中;

　　最后設(shè)置當(dāng)前元素的 line-height: initial; 來繼承父元素的line-height。

　　具體代碼如下：

　　.parent{

　　width: 90vw;

　　border: 3px solid steelblue;

　　/* 核心代碼 */

　　line-height: 500px;

　　text-align: center;

　　}

　　.child{

　　background: tomato;

　　/* 核心代碼 */

　　display: inline-block;

　　vertical-align: middle;

　　line-height: initial;

　　}

　　具體效果如下：

　　5.table 表格元素

　　通過最經(jīng)典的 table 元素來進(jìn)行水平垂直居中，不過代碼看起來會(huì)很冗余，不推薦使用;

　　具體代碼如下：

<table>

  <tbody>

    <tr>

      <td class="parent">

        <div class="child"></div>

      </td>

    </tr>

  </tbody>

</table>

<style>

  .parent {

    width: 90vw;

    height: 90vh;

    border: 3px solid steelblue;

    /* 核心代碼 */

    text-align: center;

  }

  .child {

    background: tomato;

    /* 核心代碼 */

    display: inline-block;

  }

</style>

　　具體效果如下：

　　6.css-table 表格樣式

　　如果一定要使用 table 的特性，但是不想寫 table 元素的話，那么css-table 就很適合你;

　　具體代碼如下：

　　.parent{

　　width: 90vw;

　　height: 90vh;

　　border: 3px solid steelblue;

　　/* 核心代碼 */

　　display: table-cell;

　　text-align: center;

　　vertical-align: middle;

　　}

　　.child{

　　background: tomato;

　　/* 核心代碼 */

　　display: inline-block;

　　}

　　具體效果如下：

　　7.flex 布局(一)

　　要說現(xiàn)在較為流行和使用較多的布局方案，那么非 flex 莫屬了，那么舉例兩個(gè)最常見的使用方式 ~

　　直接在 flex-container 上通過幾行代碼即可很優(yōu)雅的實(shí)現(xiàn)

　　具體代碼如下：

　　.parent {

　　width: 90vw;

　　height: 90vh;

　　border: 3px solid steelblue;

　　/* 核心代碼 */

　　display: flex;

　　justify-content: center;

　　align-items: center;

　　}

　　.child{

　　background: tomato;

　　}

　　justify-content 表示：設(shè)置或檢索彈性盒子元素在主軸(橫軸)方向上的對(duì)齊方式;

　　align-items 表示：定義 flex 子項(xiàng)在 flex 容器的當(dāng)前行的側(cè)軸(縱軸)方向上的對(duì)齊方式。

　　具體效果如下：

　　8.flex + margin auto(二)

　　在 flex-item 上更加優(yōu)雅的實(shí)現(xiàn)

　　具體代碼如下：

　　.parent{

　　width: 90vw;

　　height: 90vh;

　　border: 3px solid steelblue;

　　/* 核心代碼 */

　　display: flex;

　　}

　　.child{

　　background: tomato;

　　/* 核心代碼 */

　　margin: auto;

　　}

　　具體效果如下：

　　flex 的兩種方法使用取舍，任憑您意

　　附贈(zèng) flex 兼容性圖片一張

　　9.grid 網(wǎng)格布局 (一)

　　grid 布局相信大家在實(shí)際項(xiàng)目中用的較少，主要是該布局實(shí)在是太超前，導(dǎo)致了兼容性不是那么理想，但是不可否認(rèn)的是 grid 的能力在 css 布局中絕對(duì)是一個(gè)質(zhì)的飛躍。

　　CSS Grid 包含與 Flexbox 幾乎相同的對(duì)齊選項(xiàng)，因此我們可以在 grid-container 上優(yōu)雅的實(shí)現(xiàn)

　　具體代碼如下：

　　.parent{

　　width: 90vw;

　　height: 90vh;

　　border: 3px solid steelblue;

　　/* 核心代碼 */

　　display: grid;

　　align-items: center;

　　justify-content: center;

　　}

　　.child{

　　background: tomato;

　　}

　　具體效果如下：

　　10.grid 網(wǎng)格布局 (二)

　　同樣我們可以像 Flexbox 一樣，在 grid-item 上優(yōu)雅的實(shí)現(xiàn)

　　具體代碼如下：

　　.parent{

　　width: 90vw;

　　height: 90vh;

　　border: 3px solid steelblue;

　　/* 核心代碼 */

　　display: grid

　　}

　　.child{

　　background: tomato;

　　/* 核心代碼 */

　　align-self: center;

　　justify-self: center;

　　}

　　具體效果如下：

　　flex 的兩種方法使用取舍，任憑您高興

　　附贈(zèng) grid 兼容性圖片一張

　　總結(jié)：在學(xué)習(xí)了上面的 11 種垂直居中布局方法后，我們簡(jiǎn)單概括一下：

　　· 如果你的項(xiàng)目在 PC 端有兼容性要求并且寬高固定，推薦使用 absolute + 負(fù) margin 方法實(shí)現(xiàn);

　　· 如果你的項(xiàng)目在 PC 端有兼容性要求并且寬高不固定，推薦使用 css-table 方式實(shí)現(xiàn);

　　· 如果你的項(xiàng)目在 PC 端無兼容性要求 ，推薦使用 flex 實(shí)現(xiàn)居中，當(dāng)然不考慮 IE 的話，grid 也是個(gè)不錯(cuò)的選擇;

　　· 如果你的項(xiàng)目在移動(dòng)端使用 ，那么推薦你使用 flex ，grid 也可作為備選。

　　寫在最后

　　其實(shí)以上的是一種垂直居中方法，只是比較常見的，其實(shí)還有一些比較冷門的方式方法，例如 偽類元素、grid-container 的 grid-template-rows等，大家下去可以自行嘗試一下 ~

　　- End -