CSS 如何实现内容居中

在网页设计中，实现内容居中是一项极为常见且重要的任务。合理运用 CSS 技术，能让页面布局更加美观、舒适。下面就为大家详细介绍几种常见的 CSS 实现内容居中的方法。

水平居中

对于行内元素，比如 <span> 标签内的文本，要实现水平居中，可在其父元素上设置 text-align: center。例如：

.parent {
    text-align: center;
}

对于块级元素，若宽度固定，可设置 margin: 0 auto。代码示例如下：

.child {
    width: 200px;
    margin: 0 auto;
}

而对于弹性布局（Flexbox）中的元素，使用 justify-content: center 可以实现主轴方向的水平居中。示例代码：

.parent {
    display: flex;
    justify-content: center;
}

垂直居中

对于单行文本的垂直居中，可将元素的 line-height 设置为与元素高度相同的值。比如：

.child {
    height: 50px;
    line-height: 50px;
}

在 Flexbox 布局中，使用 align-items: center 能实现交叉轴方向的垂直居中。代码如下：

.parent {
    display: flex;
    align-items: center;
}

如果想要同时实现水平和垂直居中，Flexbox 提供了便捷的方式。通过设置 display: flex，并结合 justify-content: center 和 align-items: center 即可。示例：

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

对于绝对定位的元素，还可以使用 top: 50%; left: 50%; transform: translate(-50%, -50%) 来实现水平和垂直居中。代码如下：

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

掌握这些 CSS 实现内容居中的技巧，能有效提升网页布局的质量。无论是简单的文本居中，还是复杂的元素布局，都能根据实际情况选择合适的方法来达成理想效果，为用户带来更好的视觉体验。