七种方式实现垂直居中

你咋还没背下来

(方方) #1

如果 .parent 的 height 不写,你只需要 padding: 10px 0; 就能将 .child 垂直居中;
如果 .parent 的 height 写死了,就很难把 .child 居中,以下是垂直居中的方法。
忠告:能不写 height 就千万别写 height。

  1. table自带功能

  2. 100% 高度的 afrer before 加上 inline block
    这个方法还有一个优化版本

  3. div 装成 table

  4. margin-top -50%

  5. translate -50%

  6. absolute margin auto

  7. flex

  8. 还有其他方法,自己搜吧。


2018 押题
(方方) #2