>[danger]一面：垂直居中 | 方案名称 | 解释 | | -------------------- | ------------------------------------------------------------ | | `vertical-align` 属性 | 用于控制元素内部的行内元素（如文本或图片）的垂直对齐方式。通常与 `display: table-cell` 结合使用，实现单元格内部的元素垂直居中。 | | `line-height` 属性 | 用于设置行内元素的行高，可以使单行文本元素垂直居中。但是如果元素高度超过一行，则无法实现垂直居中。 | | `flexbox` 布局 | 使用 `display: flex` 和相关属性可以实现容器内元素的水平和垂直居中。 | | `grid` 布局 | 使用 `display: grid` 和相关属性可以实现网格布局中元素的水平和垂直居中。 | | 绝对定位 + 负边距 | 将需要垂直居中的元素绝对定位到容器中心，然后通过负边距调整元素位置。 | >[info]技术详解 1. Flex布局 使用Flex布局可以方便地实现垂直和水平居中。只需要将要居中的元素的容器设置为display: flex，并在容器上设置align-items:center和justify-content:center两个属性，即可实现水平和垂直居中。比如： ```css .container { display: flex; align-items: center; justify-content: center; } ``` 2. 绝对定位+负边距 利用绝对定位和负边距也可以实现垂直居中。首先，将要居中的元素设置为绝对定位，并使用top、bottom、left、right属性将其定位于父容器的正中间。然后，将元素的宽高设置为确定的值，再通过设置margin:auto来实现水平居中。比如： ```css .container { position: relative; } .child { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; } ``` 3. 表格布局 使用表格布局也可以轻松实现水平和垂直居中。首先，将要居中的元素放在一个单元格中，然后将该单元格的内容水平和垂直都居中。这样就可以实现元素的垂直和水平居中。比如： ```css .wrapper { display: table; } .container { display: table-cell; vertical-align: middle; text-align: center; } ``` 4. Line-height等于高度 当元素只有一行文本时，可以使用这种方法实现元素的垂直居中。只需将元素的line-height属性设置为与其高度相等即可。比如： ```css .container { height: 100px; line-height: 100px; } ```