CSS 实现元素居中的 4 种不同方式

在网页设计中，元素的居中对齐是一个常见需求。合理运用 CSS 技术，能实现不同场景下元素的完美居中。下面介绍 4 种常见的 CSS 实现元素居中的方式。

一、文本水平居中：text-align:center

对于行内元素或块级元素内的文本，使用 text-align:center 是最直接的方法。例如，在一个 <div> 容器中放置一段文本，给 <div> 元素设置 text-align:center 样式，文本就会在该容器内水平居中显示。此方法仅适用于行内元素或文本内容，对块级元素本身的水平居中无效。

二、块级元素水平居中：margin:0 auto

当需要让一个具有固定宽度的块级元素在其父元素中水平居中时，可使用 margin:0 auto。比如一个宽度为 300px 的 <div> 元素，要在其父元素中水平居中，只需给这个 <div> 添加 width:300px;margin:0 auto 样式即可。这里的 0 表示上下边距为 0，auto 使浏览器自动分配左右边距，从而实现元素水平居中。

三、绝对定位与负边距实现水平垂直居中

对于已知宽度和高度的元素，可以通过绝对定位和负边距来实现水平垂直居中。首先将父元素设置为 position:relative，子元素设置为 position:absolute。然后通过 top:50%;left:50% 将子元素的左上角定位到父元素的中心位置，再使用负边距 margin-top 和 margin-left 为自身宽度和高度的一半，将元素向上和向左拉回自身尺寸的一半，实现水平垂直居中。

四、Flexbox 布局实现居中

Flexbox（弹性布局）是现代 CSS 中实现元素居中的强大工具。给父元素设置 display:flex 或 display:inline-flex 开启弹性布局模式。若要水平居中，可使用 justify-content:center；垂直居中则用 align-items:center。如果要同时实现水平和垂直居中，只需在父元素上同时应用这两个属性即可。

掌握这 4 种 CSS 实现元素居中的方式，能有效提升网页布局的灵活性和美观度，满足各种设计需求，打造出更优质的用户体验。