拼多多前端面试题及参考答案（200道-下）

如何实现元素的垂直居中？请说出多种方法。

元素垂直居中的实现难度高于水平居中，需根据元素的“类型”（行内/行内块、块级）、“是否定高”及“兼容性要求”选择方法，常见方案包括“行内元素 line-height 对齐”“绝对定位偏移”“Flex 布局”“Grid 布局”“Table 布局”等，每种方法的适用场景和核心原理需明确区分。

一、按元素类型分类的垂直居中方法

1. 方法1：行内/行内块元素（单行文本）——父元素 line-height = height

• 核心原理：line-height 是“行内内容的高度”，当父元素的 line-height 等于 height 时，单行文本会在父元素中垂直居中（行内块元素需配合 vertical-align: middle 优化对齐）；
• 适用元素：单行文字（span、a）、单行行内块元素（img、input）；
• 优点：实现简单，兼容性极好（支持 IE6+）；
• 缺点：仅适用于单行内容，多行文本会溢出或错乱；
• 代码示例：

   

  <style>.