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;
复制代码

无论这个元素还应用了其余什么属性，这样写就够了。

特意试了下，貌似如今还不支持，期待将来吧。。。