css实现元素垂直居中显示的7种方式

下面为您讲解“CSS实现元素垂直居中显示的7种方式”的完整攻略。

下面为您讲解“CSS实现元素垂直居中显示的7种方式”的完整攻略。

1. 行高（line-height）法

将父元素的行高设置与子元素高度相同，即可实现垂直居中。例如：

<div style="height: 200px; line-height: 200px;">居中显示的文本</div>

2. 绝对定位法

使用绝对定位来控制元素的位置。首先将父元素设置为相对定位，然后将子元素设置为绝对定位，在子元素中使用top和left属性来控制其位置。例如：

<div style="position: relative; height: 200px;">
  <div style="position: absolute; top: 50%; transform: translateY(-50%);">居中显示的文本</div>
</div>

3. flex布局法

使用flex布局来控制元素的位置。将父元素设置为display: flex，然后在子元素中使用align-items和justify-content属性来控制其在父元素中的位置。例如：

<div style="display: flex; align-items: center; justify-content: center; height: 200px;">居中显示的文本</div>

4. table-cell法

将父元素设置为display: table-cell，然后使用vertical-align属性来控制子元素的位置。例如：

<div style="display: table-cell; text-align: center; vertical-align: middle; height: 200px;">居中显示的文本</div>

5. grid布局法

使用grid布局来控制元素的位置。将父元素设置为display: grid，然后在子元素中使用align-self和justify-self属性来控制其在父元素中的位置。例如：

<div style="display: grid; align-items: center; justify-items: center; height: 200px;">
  <div style="align-self: center; justify-self: center;">居中显示的文本</div>
</div>

6. transform法

使用transform属性来将元素向上移动一半的高度。例如：

<div style="position: relative; height: 200px;">
  <div style="position: absolute; top: 50%; transform: translateY(-50%);">居中显示的文本</div>
</div>

7. calc法

使用calc计算出偏移量。例如：

<div style="position: relative; height: 200px;">
  <div style="position: absolute; top: calc(50% - 10px);">居中显示的文本</div>
</div>

以上就是完整的“CSS实现元素垂直居中显示的7种方式”的攻略，希望对你有所帮助。