垂直居中布局 1.文本/行内元素/行内块级元素: 2.图片元素垂直居中: 3.单个块级元素: 3.1使用table-cell实现: 3.2使用绝对定位 3.3使用flex实现: 1.文本/行内元素/行内块级元素: 原理:line-height与height值相等 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VYRJYgaR-1615303152625)(./1615198577100.png)] 2.图片元素垂直居中: 原理:vertical-align和line-height的关系 #parent{ height:150px; line-height:150px; font-size:0; } /*默认是基线对齐改为middle*/ imagechild