CoderBlog

# 居中显示

# 一、水平居中

# 1. 内联元素

<div class="container">
  <span class="content">水平居中</span>
</div>
1
2
3

# （1）text-align

text-align 一般运用在块级元素中，使其中的文本对齐。实际上，运用在块级元素中的text-align会使其包含的内联元素水平对齐。

.container {
  text-align: center;
}
1
2
3

# 2. 块级元素

<div class="container">
  <div class="content">水平居中</div>
</div>
1
2
3

# （1）margin

如果块元素的高度和宽度已知，就可以通过将元素的左右margin值设置为auto将元素水平居中：

.content {
  width: 100px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
}
1
2
3
4
5
6

如果有多个块元素，需要将多个元素包裹在一个元素中以使用该方法实现水平居中：

<div class="container">
  <div class="box">
    <div class="content">水平居中</div>
    <div class="content">水平居中</div>
  </div>
</div>
.box {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}
1
2
3
4
5
6
7
8
9
10
11

# 3. 通用

# （1）Flex 布局

在 Flex 布局中，justify-content可以用于设置弹性盒子元素在主轴方向上的对齐方式。当其属性值为 center 时，其子元素整体会在主轴的中心位置。

.container {
  display: flex;
  justify-content: center;
}
1
2
3
4

如果弹性盒子的主轴是垂直方向，可以使用align-items来代替justify-content以实现元素的水平居中：

.container {
	display: flex;
	flex-direction: column
	align-items: center;
}
1
2
3
4
5

# （2）Grid 布局

在 Grid 布局中，justify-content 属性会沿着行轴线（水平方向） 在网格容器中对齐网格。当属性值为center时，就可以将网格对齐到网格容器的水平居中位置。

.container {
  display: grid;
  justify-content: center;
}
1
2
3
4

# （3）绝对定位

可以通过将使用绝对定位和变换实现元素的水平居中：

.container {
  position: relative;
}

.content {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
1
2
3
4
5
6
7
8
9

如果块元素的宽度已知，也可以使用负边距来代替transform：

.container {
  position: relative;
}

.content {
  width: 100px;
  position: absolute;
  left: 50%;
  margin-left: -50px;
}
1
2
3
4
5
6
7
8
9
10

# 二、垂直居中

# 1. 单行文本垂直居中

很常用，主要用于文字的排版，也可以用于图片元素居中

行高：内容高度 + 下距离 + 上距离，文本内容在每一行中都是居中的，利用这个原理可以实现文本垂直居中。

line-height: 100px;
height: 100px; // 有line-height 设置后没必要再设置height
1
2

若元素是单行文本, 则可设置 line-height 等于父元素高度

# 2. 绝对定位

<div class="container">
  <div class="content">垂直居中</div>
</div>
1
2
3

#

可以通过将使用绝对定位和变换实现元素的垂直居中：

.container {
  position: relative;
}

.content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
1
2
3
4
5
6
7
8
9

如果块元素的高度已知，也可以使用负边距来代替transform：

.container {
  position: relative;
}

.content {
  height: 100px;
  position: absolute;
  top: 50%;
  margin-top: -50px;
}
1
2
3
4
5
6
7
8
9
10

# 3. 通用

# （1）Flex 布局

在 Flex 布局中，align-items 属性用来定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。当其属性值为 center 时，元素位于容器的中心。

.container {
  display: flex;
  align-items: center;
}
1
2
3
4

如果将Flex 的主轴切换为垂直方向，则需要使用justify-content来代替align-items以实现元素的垂直居中：

.flex {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
1
2
3
4
5

# （2）Grid 布局

使用 CSS Grid 布局中，可以使用 align-content 属性将项目垂直居中到其网格区域。

.container {
  display: grid;
  align-content: center;
}
1
2
3
4

如果将网格的排列方向更改为水平，垂直居中依旧是生效的：

.container {
  display: flex;
  align-content: center;
	grid-auto-flow: column;
}
1
2
3
4
5

# 三、水平垂直居中

<div class="container">
  <div class="content">水平垂直居中</div>
</div>
1
2
3

# （1）绝对定位

使元素垂直居中最通用的方法就是使用绝对定位和transform：

.container {
  position: relative;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
1
2
3
4
5
6
7
8
9
10

如果元素的高度和宽度已知，也可以使用margin来代替transform:

.container {
  position: relative;
}

.content {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

# （2）Flex 布局

在使用 Flex 布局时，可以结合上面的水平和垂直居中来实现水平垂直居中：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
1
2
3
4
5

# （3）Grid 布局

在 Grid 布局中，可以使用以下形式来实现元素的水平垂直居中：

.container {
  display: grid;
  place-items: center;
}
1
2
3
4

place-content 属性是align-content和justify-content的简写，当该属性的值为center时，所有的子元素堆叠在父元素的中间对齐。

# 四、总结

行内元素、行内块元素、块元素，居中显示不管是垂直还是水平的时候：

  • 绝对定位+负margin（需要知道尺寸）
  • 绝对定位+margin:auto
  • 绝对定位 + transform
  • flex

行内块元素

  • 水平方向受 text-align 控制
  • 垂直方向受 vertical-align 控制

响应式布局 →