CSS-盒子水平垂直居中的五大方案

让 .box在 .wrapper中水平垂直居中。

HTML代码：

<div class="wrapper">
  <div class="box">div>
div>

---

定位：三种

1. position：absolute 需要知道子盒子的具体宽高

2. margin: auto 需要子盒子有宽高，但不需要去考虑它的宽高是多少

3. css3新属性transform 可以不需要宽高

---

display: flex

---

display: table-cell

display: table-cell是用来控制文本的，所以这里父元素必须设置固定宽高，且子元素要设置display: inline-block

---

JS实现

屏幕的宽高-盒子的宽高，最后除以2，获取的值就是它应该具备的LEFT/TOP（这个值可以让它处于页面中间）