方法1:align-content: center
在 2024 年的 CSS 原生属性中允许使用 1 个 CSS 属性 align-content: center
进行垂直居中。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><style>.box {height: 100px; width: 100%;border: 1px solid red;text-align: center;}</style><body><div class="box" style="align-content: center;"><code>align-content</code> 垂直居中!</div></body>
</html>
实现效果:
方法2:表格单元格
有 4 种主要布局:流(默认)、表格、flexbox、grid。如何对齐取决于容器的布局。Flexbox 和 grid 相对较晚添加,所以表格是第一种方式。
<div class="box" style="display: table;"><div style="display: table-cell; vertical-align: middle;">内容。</div>
</div>
方法3:绝对定位
通过绝对定位间接的方式来实现这个效果。
<div class="box" style="position: relative;"><div style="position: absolute; top: 50%; transform: translateY(-50%);">内容。</div>
</div>
这个方式通过绝对定位来绕过流式布局:
-
用
position: relative
标记参考容器。 -
用
position: absolute; top: 50%
将内容的边缘放置在中心。 -
用
transform: translateY(-50%)
将内容中心偏移到边缘。
方法4:内联内容
虽然流布局对内容对齐没有帮助。它允许在一行内进行垂直对齐。那么可以让行的高度和容器一样高。
<div class="container">::before<div class="content">内容。</div>
</div>
.container::before {content: '';height: 100%;display: inline-block;vertical-align: middle;
}
.content {display: inline-block;vertical-align: middle;
}
这个方式有一个缺陷,需要额外创建一个伪元素。
方法5:单行 flexbox
现在布局中的 Flexbox 变得广泛可用。它有两种模式:单行和多行。在单行模式(默认)中,行填充垂直空间,align-items
对齐行内的内容
<div style="display: flex; align-items: center;"><div>内容。</div>
</div>
或者调整行为列,并用 justify-content
对齐内容。
<div style="display: flex; flex-flow: column; justify-content: center;"><div>内容。</div>
</div>
方法6:多行 flexbox
在多行 flexbox 中,行不再填充垂直空间,所以行(只有一个项目)可以用 align-content
对齐。
<div style="display: flex; flex-flow: row wrap; align-content: center;"><div>内容。</div>
</div>
方法7:grid
Grid 出来的更晚,对齐变得更简单。
<div style="display: grid; align-content: center;"><div>内容。</div>
</div>
方法8:grid 单元格
注意与前一个方法的微妙区别:
-
align-content
将单元格居中到容器。 -
align-items
将内容居中到单元格,同时单元格拉伸以适应容器。
<div style="display: grid; align-items: center;"><div>内容。</div>
</div>
方法9:margin:auto
在流布局中,margin:auto
可以水平居中,但不是垂直居中。使用 margin-block: auto
可以设置垂直居中。
<div style="display: grid;"><div style="margin-block: auto;">内容。</div>
</div>