CSS如何实现垂直水平居中？

这问题简直是前端领域的“经典咏流传”，我从业这么多年，面试新人十有八九会问到它。说白了，就是让一个元素在父容器里不偏不倚，呆在正中间。方法挺多，选对顺手的最重要。

早些年，大家常用绝对定位加负边距或者transform来硬搞。比如父容器相对定位，子元素绝对定位后，通过top: 50%; left: 50%先挪到中间点，再用transform往回拉自身一半的尺寸。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这法子兼容性不错，但缺点是你得知道子元素的具体尺寸吗？不用，translate的百分比是基于元素自身的，所以不管它多大都能居中。

现在日子好过多了，Flexbox一出来，居中简直成了“赠品”。你只要在父容器上设置几句，子元素自己就乖乖跑到中间去了。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

就这么简单，justify-content管水平，align-items管垂直。要是整个页面都想居中，给body或者html套上这个也行，特别适合弹窗或者登录框这种场景。

还有CSS Grid，它更擅长处理二维布局，但拿来居中也是杀鸡用牛刀，一行代码的事。

.parent {
  display: grid;
  place-items: center;
}

place-items这个属性是align-items和justify-items的缩写，设成center就齐活了。

具体用哪种，看你的项目环境和需求。老项目维护可能还得用绝对定位，新项目我无脑推荐Flexbox，写起来痛快，浏览器支持也够广。总之，别再把居中当难题了，工具就在手边，用对方法分分钟搞定。