不定宽高元素的水平垂直居中

前端开发中水平垂直居中是绕不开的坎，尤其是宽高不定的元素，之前听说过总总办法，由于自己懒，也没一一去试，今天就做一个总结。

PS：纯CSS实现，布局的问题不应试交给JavaScript(除非某些破不得已的情况)。

预期结果

HTML代码

<div class="panel">
  <div class="box"></div>
</div>

Flex 方法

.panel {
  width: 600px;
  height: 400px;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  width: 83%;
  height: 79%;
  background:green;
}

Flex 是最简单的实现方法，由于目前通常是移动开发，这也是我的首选的方法。关于 Flex 布局可以参考：Flex 布局教程

margin: auto 方法

.panel {
  width: 500px;
  height: 400px;
  background: red;
  position: relative;
}
.box {
  width: 76%;
  height: 79%;
  background: green;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

这算是 css 的一个奇技淫巧，非移动端开发下首选。

CSS3 transform

.panel {
  width: 500px;
  height: 400px;
  background: red;
  position: relative;
}
.box {
  width: 79%;
  height: 77%;
  background: green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

利益于 CSS3 中 transform 的 translate 方法，使用百分比的时候基准为自己本身的宽高。在支持 CSS3 的情况下可以放心用。

后续

如有其他方法再补充，以上。