当前位置：首页 > news >正文

css-元素居中方式

news 2025/9/16 3:57:13

<section class="wrapper"><div class="content">Content goes here</div>
</section>

1. 使用 Flexbox

Flexbox 是一种现代的布局方法，可以轻松实现居中。

.wrapper {display: flex;                 /* 使用 Flexbox 布局 */justify-content: center;       /* 水平居中 */align-items: center;           /* 垂直居中 */height: 100vh;                 /* 设置高度以便上下居中 */
}.content {/* 你的内容样式 */
}

2. 使用 Grid

CSS Grid 也是一种强大的布局工具，适合居中。

.wrapper {display: grid;                /* 使用 Grid 布局 */place-items: center;          /* 同时进行水平和垂直居中 */height: 100vh;                /* 设置高度以便上下居中 */
}.content {/* 你的内容样式 */
}

3. 使用绝对定位

绝对定位也可以用来实现居中，但需要设置父元素为相对定位。

.wrapper {position: relative;            /* 设置父元素为相对定位 */height: 100vh;                /* 设置高度以便上下居中 */
}.content {position: absolute;            /* 设置子元素为绝对定位 */top: 50%;                     /* 距离顶部 50% */left: 50%;                    /* 距离左侧 50% */transform: translate(-50%, -50%); /* 通过变换调整元素位置 */
}

4. 使用 Margin Auto（块元素）

对于块级元素，可以使用 margin: auto 来实现水平居中，配合设置高度实现垂直居中。

.wrapper {display: block;               /* 块级元素 */height: 100vh;               /* 设置高度以便上下居中 */
}.content {width: 50%;                   /* 设定宽度 */height: 50%;                  /* 设定高度 */margin: auto;                 /* 上下左右自动边距实现居中 */
}

5. 使用 Table 布局

虽然不常用，但使用 display: table 也可以实现居中。

.wrapper {display: table;               /* 设置为表格布局 */height: 100vh;               /* 设置高度以便上下居中 */width: 100%;                  /* 设置宽度 */
}.content {display: table-cell;          /* 设置为表格单元格 */vertical-align: middle;       /* 垂直居中 */text-align: center;           /* 水平居中（可选） */
}

6. 使用 Line Height（适合单行文本）

如果内容是单行文本，可以利用 line-height 实现垂直居中。

.wrapper {height: 100vh;               /* 设置高度以便上下居中 */text-align: center;          /* 水平居中 */
}.content {line-height: 100vh;          /* 行高等于父元素高度 */
}