前言

面试官：听说你css玩的很溜？

小明：没错，溜得飞起。。。。

面试官：来讲讲css水平垂直居中吧，你有几种方式？

小明：flex一把梭啊。

面试官：还有呢？

小明：像什么position：absolute，top=0，left=0，margin=auto，负magin，calc啊等等都ok呀

面试官：详细讲讲 ？？

position:absolute + margin

position:absolute + 负margin

position:absolute + calc

position:absolute + transform

css-table

小明：还有 display: flex，display: grid, 要讲讲吗？？

面试官：暂时不需要了，我有几个问题想问你一下，css-table中，为什么子元素要设置display：inline-block呢？transForm里面，为什么子元素要translate(-50%,-50%)呢？ 1 小明：请看下图

为了方便计算，我把父级盒子设置为高度600px，刚好为子元素的2倍，设置的top为50%恰好与边界重合，则说明，此时的50%是根据绝对定位的50%进行定位的，假如以绿色块的中心点作为原点画一个2d坐标系的话，粉色块的左上角的点的坐标为（0, 0），粉色块的边长为300px，那么粉色块的中心点坐标为（-150px，-150px）。故而为自身宽高的一半，则如是。

面试官：嗯，不错不错，分析的挺有道理的，那css-table那个呢 ？

小明：www.jianshu.com/p/52b0c2a7e…

小明： zhuanlan.zhihu.com/p/26145855 小明：还有其他的水平垂直居中方式啊，像什么。。。（面试官赶紧打断）

面试官：行了，那我们进入下一题吧。。。。

总结

• 如果你的项目在 PC 端有兼容性要求并且宽高固定，推荐使用 absolute + 负 margin 方法实现；
• 如果你的项目在 PC 端有兼容性要求并且宽高不固定，推荐使用 css-table，transform:translate 方式实现；
• 如果你的项目在 PC 端无兼容性要求 ，推荐使用 flex 实现居中，当然不考虑 IE 的话，grid 也是个不错的选择；
• 如果你的项目在移动端使用 ，那么推荐你使用 flex ，grid 也可作为备选。