Randysheng

# CSS 中的居中汇总

# 水平居中

# 内联元素

对于 display:inline 或者 display:inline-* 的元素，只需要设置其父元素 text-align:center ，即可实现水平方向上的居中效果。例如：

<div style="text-align: center;">
  <span>我是一个内联元素</span>
<div>
1
2
3

# 块级元素

# 单个块级元素

对于设置了宽度的块级元素，将其的 margin-left 和 margin-right 设置为 auto ，即可实现水平方向上的居中效果。例如：

<div style="width: 200px; margin: 0 auto;"></div>
1

# 多个块级元素

对于多个块级元素需要在同一水平方向上居中，可以使用以下两种方式：

# (1) display:inline-block + text-align:center
<style>
  .parent {
    text-align: center;
  }
  .child {
    display: inline-block;
  }
</style>
<div class="parent">
  <div class="child">我是子元素</div>
  <div class="child">我是子元素</div>
  <div class="child">我是子元素</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
# (2) display:flex + justify-content:center
<style>
  .parent {
    display: flex;
    justify-content: center;
  }
</style>
<div class="parent">
  <div>我是子元素</div>
  <div>我是子元素</div>
  <div>我是子元素</div>
</div>
1
2
3
4
5
6
7
8
9
10
11

# 垂直居中

# 内联元素

# 单行文字

# 设置 padding

对于只有一行文字的内联元素，只需要将其 padding-top 和 padding-bottom 设置为相同的值，即可实现垂直方向上的居中效果。例如：

<div>
  <span style="padding: 10px;">我是一个内联元素</span>
</div>
1
2
3
# 设置 line-height

有时候不能设置元素的 padding 且文本不会换行时，那么可以设置 line-height 等于自身高度，即可实现垂直方向上的居中效果。例如：

<div style="height: 100px; line-height: 100px;"><span>一行文字</span></div>
1

# 多行文字

# 设置 padding

同单行文字一样，将其 padding-top 和 padding-bottom 设置为相同的值，即可实现垂直方向上的居中效果。例如：

<div style="width: 200px; padding: 20px;"><span>我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字。</span></div>
1
# 使用 table 布局

利用 table 中内容默认是垂直居中的特性，即可实现垂直方向上的居中效果。例如：

<table>
  <tr>
    <td>
      我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字。
    </td>
  </tr>
</table>
1
2
3
4
5
6
7

或

<div style="display: table-cell; width: 200px; height: 500px; vertical-align: middle;">
  <span>我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字。</span>
</div>
1
2
3
# flexbox

利用 flex 弹性布局可以轻松实现垂直方向上的居中效果。例如：

<div style="display: flex; align-items: center;">
  <span>我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字。</span>
</div>
1
2
3

# 块级元素

# 已知元素高度

使用绝对定位 + 外边距实现垂直方向上居中效果。例如：

<div style="position: relative; height: 300px;">
  <div style="position: absolute; height: 100px; top: 50%; margin-top: -50px;">我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字。</div>
</div>
1
2
3
4

# 未知元素高度

使用绝对定位 + transform 实现垂直方向上居中效果。例如：

<div style="position: relative; height: 300px;">
  <div style="position: absolute; height: 100px; top: 50%; transform: translateY(-50%);">我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字。</div>
</div>
1
2
3

# flexbox

使用 flex 弹性盒子，依然可以轻松实现垂直方向上居中效果。例如：

<div style="display: flex; align-items: center;">
  <div>我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字，我是一个多行文字。</div>
</div>
1
2
3

# 水平垂直居中

# 已知宽高

# absolute + margin 负值

<div style="width: 200px; height: 200px; position: relative;">
  <div style="width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin-top: -50px;">我是子元素</div>
</div>
1
2
3

# absolute + margin auto

<div style="width: 200px; height: 200px; position: relative;">
  <div style="width: 100px; height: 100px; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; margin: auto;">我是子元素</div>
</div>
1
2
3

# absolute + cacl

<div style="width: 200px; height: 200px; position: relative;">
  <div style="width: 100px; height: 100px; position: absolute; top: calc(50% - 50px); left: calc(50%-50px);">我是子元素</div>
</div>
1
2
3

# 未知宽高

# absolute + transform

<div style="width: 200px; height: 200px; position: relative;">
  <div style="width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">我是子元素</div>
</div>
1
2
3

# absolute + transform

<div style="width: 200px; height: 200px; position: relative;">
  <div style="width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">我是子元素</div>
</div>
1
2
3

# 设置 line-height

<div style="width: 200px; height: 200px; line-height: 200px; text-align: center;">
  <div style="display: inline-block; line-height: initial; vertical-align: middle;">我是子元素</div>
</div>
1
2
3

# flexbox

<div style="display: flex; justify-content: center; align-items: center;">
  <div>我是子元素</div>
</div>
1
2
3

# grid

<div style="display: grid;">
  <div style="align-self: center; justify-self: center;">我是子元素</div>
</div>
1
2
3

# table

利用 table 中内容默认是垂直居中的特性，再设置 text-align: center; 即可实现水平垂直居中效果。

# writing-mode

通过 writing-mode 让文字的显示变为垂直方向，并且是所有水平方向上的 css 属性，都会变为垂直方向上的属性，比如 text-align ，通过 writing-mode 和 text-align 就可以做到水平和垂直方向的居中了。

<div style="writing-mode: vertical-lr; text-align: center;">
  <div style="width: 100%; writing-mode: horizontal-tb; display: inline-block; text-align: center;">
    <div style="display: inline-block; margin: auto; text-align: left;">我是子元素</div>
  </div>
</div>
1
2
3
4
5

← BFC 入门 →