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