css 垂直置中 - noway55m/front-end-study GitHub Wiki

垂直置中:

  • inline中的inline/inline-block:不需另外做什么处理,因为无法设定width或height,所以一定就是与内容文字的大小一致,无此问题。
  • div中的inline/inlined-block:
    1. 单行:将"父元素"的height与line-height设定一样,则内部的元素即会完全垂直置中。
    2. 多行:设定"vertical-align:middle",但是由于vertical-align的原理是在内部"child"的元素互相对齐,因此必须"每个"元素都设定vertical-align,且必须有一个元素是100%行,才有可能垂直置中;透过新增委元素::after,必设定其高度为100%即可,当然此委元素也必须设定vertical-align:middle。
  • div中的div:
    1. 使用height:XXXpx, position:absolute, top:50, margin-top:1/2 XXXpx;
    2. 使用height:XXXpx, margin:auto auto, position:absolute, top:0px, bottom:0px;