css 垂直居中的几种实现方式
myzbx 2025-02-26 13:02 14 浏览
前言
设计是带有主观色彩的，同样网页设计中的 css 一样让人摸不头脑。网上列举的实现方式一大把，或许在这里你都看到过，但既然来到这里我希望这篇能让你看有所收获，毕竟这也是前端面试的基础。
实现方式
备注：如下页面效果中的灰色方框高度都做了限定为 100 px（即父元素）
1、line-height 方式
line-height 设置行高，多用于控制多行文本之间的间隔大小。但利用它的特性也可以控制垂直居中。
值得注意：
内联元素无法设置固定高度 height ，如果设置了 line-height 即为该元素所属行的高度，但其中的文本是垂直居中的。
块级元素需要转为内联块级元素 inline-block ，并且需要定高，对其中文本需设值 vertical-align 垂直居中属性。
2、定高图片 + vertical-align 方式
上例中已经提到了 vertical-align 属性，应该注意到它需要和 line-height 一同使用才有效果。
本例除了说明该属性的使用场景外，另外添加了 img 内联块级元素的垂直居中举例。具体代码如下：