在 Web 设计中，元素的居中对齐是一个常见的需求。无论是水平居中还是垂直居中，都能提升页面的视觉效果和用户体验。本文将介绍几种实现元素居中对齐的方法，并通过示例代码展示如何应用这些技巧。
一、居中的方法
1、利用文本对齐实现水平居中
对于需要水平居中的内联元素，如文本或图标，可以使用text-align: center;来设置文本对齐方式。这种方法简单直接，适用于单行文本或较小的内联元素。
这是一段居中文本。
.text-centered {
text-align: center;
}
这种方法适用于内联元素，而对于块级元素，可以将它们包裹在一个容器内，并对该容器应用text-align: center;。
2、使用 margin 自动水平居中
当需要水平居中一个具有固定宽度的块级元素时，可以将左右边距设置为 auto，并通过指定宽度来实现。
.block-centered {
width: 300px;
margin: 0 auto;
}
3、使用 line-height 垂直居中
对于单行文本，可以使用line-height属性来实现垂直居中。将line-height的值设置为容器的高度，可以使文本在垂直方向上居中。
单行文本垂直居中
.line-height-centered {
height: 100px; /* 容器高度 */
line-height: 100px; /* 文本行高 */
}
这种方法适用于单行文本，如果文本有多行，则可能需要其他方法来实现垂直居中。
4、Flexbox 的威力
Flexbox 布局模型提供了强大的工具来实现元素的垂直和水平居中。只需几行代码，就能让元素在容器内完美居中。
.flex-centered {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
此外，Flexbox 还提供了更多的属性，如flex-direction、flex-wrap等，可以根据需要进行更复杂的布局调整。
5、Grid 布局的多功能性
Grid 布局是另一种实现居中的现代方法。通过设置display: grid;并将place-items属性设置为center，可以轻松实现元素的垂直和水平居中。
.grid-centered {
display: grid;
place-items: center;
}
如果只需要水平或垂直居中，可以分别使用 justify-items 或 align-items。
6、绝对定位与变换
使用绝对定位和 transform 属性，可以将元素精确地居中于其父容器。这种方法适用于需要精确控制位置的情况。
.abs-centered > div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
7、高级技巧：利用 calc() 函数
对于需要动态计算居中位置的场景，可以使用 calc() 函数。通过简单的数学运算，calc() 可以帮助我们在未知尺寸的情况下也能实现居中。
.calc-centered > div {
width: 400px;
margin-left: calc(50% - 200px);
margin-right: calc(50% - 200px);
}
8、最新特性：单个属性实现垂直居中
在 2024 年的 Chrome 123 版本中，引入了一项令人兴奋的 CSS 新特性：使用单一的 align-content: center 属性来实现普通块级元素的垂直居中。这是一项突破性的改进，因为它允许开发者仅通过一个简单的属性设置，就能达到以前需要复杂布局才能实现的效果。
我是居中的元素。
.align-centered {
align-content: center;
height: 600px;
}
需要注意的是，align-content: center 只适用于块级元素。如果你试图将其应用于行内元素（如），那么该属性将不会生效。要使其工作，可以将行内元素转换为行内块级元素（display: inline-block），或者确保其父元素本身就是块级元素。
9、表格布局的回归
尽管表格布局在现代 Web 设计中并不常见，但在某些情况下，仍可以使用 table 和 table-cell 来实现元素的居中。
.table-centered {
display: table;
width: 100%;
height: 100%; /* 或者设置为一个具体的高度 */
}
.cell-centered {
display: table-cell;
vertical-align: middle; /* 垂直居中 */
text-align: center; /* 水平居中 */
}
二、总结
本文探讨了几种实现 CSS 居中的方法，包括基于文本对齐、margin自动分配、Flexbox、Grid 布局、绝对定位与变换、calc()函数计算，以及表格布局。每种方法都有其适用场景，选择合适的技术可以让你的页面布局更加美观且功能完善。
原文地址