如何实现水平垂直居中？（18年百度2轮笔试题）

[LLwanran]

提示：水平垂直居中，这几乎是一道面试必考题

仅居中元素定宽高适用：

1. absolute + 负margin
2. absolute + margin auto
3. absolute + calc

居中元素不定宽高适用：

1. absolute + transform
2. writing-mode
3. lineheight
4. table
5. css-table
6. flex
7. grid

总结：

1. PC端有兼容性要求，宽高固定，推荐absolute + 负margin
2. PC端有兼容要求，宽高不固定，推荐css-table
3. PC端无兼容性要求，推荐flex
4. 移动端推荐使用flex

回到我们的格力+中，此种场景很多，比如关机、离线、故障页等，推荐大家尽量使用gree-popup组件（center）来实现，已经完美封装好了。