前端开发-五种实现div内容居中的CSS方法

原创于 2025-06-06 22:51:36 发布 · 2k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言 #css #css3 #html5

前言

在前端开发中，有多种方法可以将 div 内的内容居中显示（包括水平和垂直居中）。以下列举了五种常用的实现方案

一、Flexbox弹性盒子

在使用这个方法之前先给大家回顾一下下弹性盒子的知识。

1.弹性盒子的定义

弹性盒子（Flexbox）是 CSS3 提供的一种布局模型，旨在更高效地分配容器内的空间和对齐项目，尤其适合动态或未知尺寸的布局场景。通过定义容器为 display: flex，其子元素（称为“弹性项目”）自动成为弹性布局的一部分。

2.为什么要用弹性盒子

弹性盒子（Flexbox）是现代CSS布局的核心工具之一，设计用于解决传统布局方式的局限性。以下是其核心优势：

简化复杂布局 弹性盒子通过简单的属性（如flex-direction、justify-content）实现水平或垂直对齐、等分空间、动态调整元素顺序等，无需依赖浮动或定位。

.container {
  display: flex;
  justify-content: space-between; /* 元素均匀分布 */
}

响应式适配 弹性容器内的子项自动伸缩，适应不同屏幕尺寸。结合flex-wrap可避免溢出，无需手动计算宽度。

.item {
  flex: 1; /* 子项自动填充剩余空间 */
}
@media (max-width: 600px) {
  .container { flex-direction: column; }
}

对齐控制精准 提供细粒度的对齐方式（如align-items: center），垂直居中仅需一行代码，传统布局需复杂技巧。
动态内容处理 子项数量变化时，弹性盒子自动重新分配空间。通过order属性可调整视觉顺序，与DOM结构解耦。

.item:nth-child(2) {
  order: -1; /* 将第二个元素移至首位 */
}

减少冗余代码 传统布局需大量清除浮动或计算边距，弹性盒子通过容器属性统一控制，显著降低代码量。

3. 修改前的css样式

图片示例代码是一个大的div包住一个小的div，以下是他的css样式：

.outside{
    background-color: beige;
    width: 100%;
    height: 400px;

}
.outside .first_box{
    width: 150px;
    height: 150px;
    background-color: yellowgreen;
}

4.居中的css样式

在父容器添加这个属性justify-content: center;就可以免去子容器中margin这个属性的设置哦！

.outside{
    background-color: beige;
    width: 100%;
    height: 400px;
    display: flex;/*设置为弹性盒子*/
    align-items: center;/*设置容器里面的内容垂直居中*/

}
.outside .first_box{
    width: 150px;
    height: 150px;
    background-color: yellowgreen;
    margin: auto;/*自动计算左右边距，设置为水平居中*/
}

此时网页就变成了

二、Grid网格布局

假如在开发过程需要二维布局，相比弹性盒子，grid布局更合适，所以这时候就需要用到我们的grid系统啦。实现如下：

.container {
  display: grid;
  place-items: center; /* 一行代码实现双向居中 */
}

当一个div里面有两个小容器，使用弹性盒子和grid布局完全不一样，对比如下：

弹性盒子：

grid：

三、文本居中

此种方式只适合纯文本/行内元素，实现方法和示例图如下：

.container {
  text-align: center;    /* 水平居中 */
  line-height: 高度值;   /* 垂直居中（需固定容器高度）*/
}

四、绝对定位+transform

这种方法不依赖容器尺寸，就算不知道容器尺寸也能实现居中

.container {
  position: relative;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 自适应内容宽高 */
}

五、表格布局

使用表格布局对一些旧版本的浏览器比较友好，兼容性好，但是注意要将父容器的display属性设置值为table，实现示例如下：

.container {
  display: table-cell;
  text-align: center; /* 水平 */
  vertical-align: middle; /* 垂直 */
}