浅谈 CSS 水平垂直居中

我们都知道，固定宽高的 div 在网页中水平垂直居中很简单，相信大家也很容易的写出来，但是不固定宽高的 div 如何水平垂直居中呢？我们在网页布局，特别是手机等 web 端网页经常是不固定宽高的 div，那么这些 div 如何水平垂直居中呢？这篇文章，我总结一下。

固定宽高水平垂直居中（块级元素）

Demo

<div class="wrap"></div>

.wrap {
  background-color: greenyellow;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 100px;
  margin-left: -100px;
  margin-top: -50px;
}

效果示例

不固定宽高水平垂直居中

注意：这里的”不固定宽高“指的是子元素

△ 方法一：vertical-align: middle（禁IE6、7、8）

<div class="wrap">
   <div class="centered"></div>
</div>

.wrap {
  width: 400px;
  height: 400px;
  background-color: greenyellow;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
}

.wrap .centered {
  /* 如果子元素是块级元素，需要 display:inline-block; 将其变为行块级元素 */
  display: inline-block;
  width: 50%;
  height: 50%;
  background-color: #77bbdd;
  vertical-align: middle;
}

.wrap::after {
  content: "";
  width: 5px;
  line-height: 400px;
  background-color: #77bbdd;
}

效果示例

△ 方法二：table-cell

<div class="wrap">
   <div class="centered"></div>
</div>

.wrap {
  width: 400px;
  height: 400px;
  background-color: chartreuse;
  display: table;
  display: table-cell;
  vertical-align: middle;
}
.wrap .centered {
  width: 50%;
  height: 50%;
  margin: 0 auto;
  background-color: burlywood;
}

效果示例

△ 方法三：translate() 终极解决方法

<div class="wrap">
   <div class="centered"></div>
</div>

.wrap {
  position: relative;
  width: 400px;
  height: 400px;
  background-color: rgb(163, 240, 236);
}
.wrap .centered {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: greenyellow;
  width: 50%;
  height: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

效果示例

CSS 3 不固定宽高水平垂直居中

在父级元素上加入下面 3 行代码，就可以实现子元素水平垂直居中。

/* 子元素水平居中 */
justify-content: center;
/* 子元素垂直居中 */
align-items: center;
display: -webkit-flex;

Demo

<div class="wrap">
   <div class="centered"></div>
</div>

.wrap {
  width: 400px;
  height: 400px;
  background: greenyellow;
  justify-content: center;
  align-items: center;
  display: -webkit-flex;
}
.wrap .centered {
  width: 50%;
  height: 50%;
  background: rgb(163, 240, 236);
}

效果示例

运用 margin:auto; 进行水平垂直居中

我们可以利用定位的方式，让 margin 上下左右都有足够的空间！那么就可以用 margin:auto; 来实现水平垂直居中了！

Demo

<div class="wrap">
   <div class="centered"></div>
</div>

.wrap {
  width: 100%;
  height: 100%;
}
.centered {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 50%;
  margin: auto;
  background-color: greenyellow;
}

效果示例