CSS-水平垂直居中

前言

在日常的開發中咱們常常會遇到水平垂直居中的需求，水平居中比較簡單：

• 行內元素水平居中：text-align: center;
• 塊級元素水平居中：margin: auto;

垂直居中相對來講稍微麻煩一點，對於固定高度的容器，經常使用的方式有：

• 行內元素（inline）或表格單元格（table-cell）元素垂直居中：vertical-align: middle;
• line-height: 父元素height;

當容器寬高都不固定的狀況下就更麻煩一些了，須要修改佈局。接下來就總結下經常使用的解決方案。

本文都以寬高不固定的圖片垂直居中爲例

解決方案

先看下要實現的效果：

使用 flex 佈局

html

<div class="box">
  <div class="img-box"><img src="imgurl" alt=""></div>
  <div class="img-box"><img src="imgurl" alt=""></div>
  <div class="img-box"><img src="imgurl" alt=""></div>
</div>
複製代碼

css

.box {
  display: flex;
  justify-content: center;
}

.img-box {
  width: 25vw;
  height: 25vw;
  border: 1px solid #ccc;
  margin: 16px;
  display: flex;
}

.img-box>img {
  margin: auto;
  max-width: 88%;
  max-height: 88%;
}
複製代碼

我的認爲 flex 是目前最好的解決方案。在 display: flex; 以後只須要使用 margin: auto; 便可達到想要的效果。針對其餘元素，flex 佈局也能優雅的完成垂直居中的效果。

使用 position 絕對定位

html 同 flex 佈局

css

.box {
  display: flex;
  justify-content: center;
}

.img-box {
  width: 25vw;
  height: 25vw;
  border: 1px solid #ccc;
  margin: 16px;
  position: relative;
}

.img-box>img {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  max-width: 88%;
  max-height: 88%;
}

/* 或者這樣寫 */
.img-box>img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  max-width: 88%;
  max-height: 88%;
}
複製代碼

這也是個很常見的解決方案，可是在實際開發中咱們有時候不能使用絕對定位，而且絕對定位會對總體佈局形成一些不可預知的問題，可能會增長咱們後期維護的成本。

使用行內塊法

html 同 flex 佈局

css

.box {
  display: flex;
  justify-content: center;
}

.img-box {
  width: 25vw;
  height: 25vw;
  border: 1px solid #ccc;
  margin: 16px;
  text-align: center;
}

.img-box:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.img-box>img {
  display: inline-block;
  vertical-align: middle;
  max-width: 88%;
  max-height: 88%;
}
複製代碼

原理就是使用 img 同級元素（這裏使用的父元素的僞元素）將高度撐起，再經過 vertical-align: middle; 實現垂直居中。

此方案會增長代碼量，而且作了太多 hack 操做，因此不推薦。

使用 table 佈局

html

<div class="box">
  <div class="img-out-box">
    <div class="img-box"><img src="imgurl" alt=""></div>
  </div>
  <div class="img-out-box">
    <div class="img-box"><img src="imgurl" alt=""></div>
  </div>
  <div class="img-out-box">
    <div class="img-box"><img src="imgurl" alt=""></div>
  </div>
</div>
複製代碼

css

.box {
  display: flex;
  justify-content: center;
}

.img-out-box {
  display: table;
  border: 1px solid #ccc;
  margin: 16px;
}

.img-box {
  width: 25vw;
  height: 25vw;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.img-box>img {
  max-width: 88%;
  max-height: 88%;
}
複製代碼

使用 table 佈局須要更多冗餘的 DOM 元素來模仿表格，因此也不推薦此方案

使用 CSS background-position 屬性

此方案只適用於圖片垂直居中

html

<div class="box">
  <div class="img-box">
    <div class="img" style="background-image: url('imgurl')"></div>
  </div>
  <div class="img-box">
    <div class="img" style="background-image: url('imgurl')"></div>
  </div>
  <div class="img-box">
    <div class="img" style="background-image: url('imgurl')"></div>
  </div>
</div>
複製代碼

css

.box {
  display: flex;
  justify-content: center;
}

.img-box {
  margin: 16px;
  padding: 16px;
  border: 1px solid #ccc;
}

.img {
  width: 25vw;
  height: 25vw;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
複製代碼

能實現居中徹底依靠於 background-position: center; 屬性

總結

我認爲最佳方案仍是 flex 。它寫法簡單，兼容性也不差，因此 flex 大法無敵！！！

PS：《CSS揭祕》寫道

根據盒對齊模型（第三版）（ www.w3.org/TR/css-alig… ） 的計劃，在將來，對於簡單的垂直居中需求，咱們徹底不須要動用特殊的佈局模式了。由於只須要下面這行代碼就能夠搞定：

align-self: center;
複製代碼

無論這個元素還應用了其餘什麼屬性，這樣寫就夠了。

特意試了下，貌似如今還不支持，期待將來吧。。。