CSS居中布局

# 前言

本文我们来讲讲 CSS 的居中布局，并通过实例分析说明各种方案的适用场景等等

# 行内元素居中布局

<div class="container">
  <span>我是行内元素</span>
</div>

1
2
3

样式进行如下设置

.container {
  width: 200px;
  height: 200px;
  /* 水平居中 */
  text-align: center;
  /* 垂直居中 与容器高度一致 */
  line-height: 200px;
}

1
2
3
4
5
6
7
8

.container {
  width: 200px;
  height: 200px;
  /* 水平居中 */
  text-align: center;
  /* 垂直居中 */
  display: table-cell;
  vertical-align: middle;
}

1
2
3
4
5
6
7
8
9

效果

我是行内元素

上述做法有一个条件，就是需要确定容器高度，那如果容器高度不确定呢？比如

<html style="height: 100%;">
  <body style="height: 100%;">
    <div style="height:50%;" class="container">
      <span>我是行内元素</span>
    </div>
  </body>
</html>

1
2
3
4
5
6
7

可以选择将 span 变为 inline-block ，然后就可以应用块级元素居中布局的方案了

那什么情况下不能使用此方案？

还有一种方案，在容器外层再包个 table 布局的容器，原来的高度设置到该容器上

<html style="height: 100%;">
  <body style="height: 100%;">
    <div style="height:50%;display: table;">
      <div class="container">
        <span>我是行内元素</span>
      </div>
    </div>
  </body>
</html>

1
2
3
4
5
6
7
8
9

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

1
2
3
4
5
6
7

那什么情况下不能使用此方案？

还可以用 absolute 的方案，不用考虑容器高度，同时也可用于子元素为块级元素的情况。

# 块级元素居中布局

<div class="container">
  <div class="block"></div>
</div>

1
2
3

block 中直接设置 margin: 0 auto 即可实现水平居中的效果，那垂直居中呢？

样式进行如下设置

/* 父容器设置 flex 布局，*/
.container{
  width: 200px;
  height: 200px;
  display: flex;
}
.block {
  height:50px;
  width:50px;
  /* 父容器为 flex 下设置 auto 0 可实现仅垂直居中*/
  /* 设置 0 auto 可实现水平居中*/
  /* 父容器为 flex 下设置 auto 可实现水平垂直居中 */
  margin: auto;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/* 父容器设置 flex 布局，*/
.container{
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.block {
  height:50px;
  width:50px;
}

1
2
3
4
5
6
7
8
9
10
11
12

将上述两种方案中的 flex 改为 grid ，效果一致

效果

现在基本不考虑浏览器兼容性问题了，这些方案基本是最佳的，那使用上需要注意什么？

其他方案

absolute + 负 margin （需要知道 block 宽高）
absolute + margin:auto
absolute + transform

# 参考

编辑

#CSS #布局

上次更新: 2023/08/26, 10:18:07

← 前端元素默认宽高 LearningHTML→