# Heading
参考列表：
在前端开发过程中，盒子居中是常常用到的。其中 ，居中又可以分为水平居中和垂直居中。水平居中是比较容易的，直接设置元素的margin: 0 auto就可以实现。但是垂直居中相对来说是比较复杂一些的。下面我们一起来讨论一下实现垂直居中的方法。
# 平移
不确定当前 div 的宽度和高度，绝对定位，设置左上距离top:50%; left:50%;，然后利用 transform: translate(-50%,-50%)向左上方向平移自身宽高的 50%; 当前 div 的父级添加相对定位（position: relative;）
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
/* translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中 */
transform: translate(-50%, -50%);
background-color: red;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 定位 50%，设置外边距
确定当前 div 的宽度和高度,绝对定位，设置左上距离top:50%; left:50%;，然后分别增加外边距margin 大小为当前 div 宽度高度一半的负值.
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 四周边距 0，外边距 auto
确定当前 div 的宽度和高度,绝对定位下 top left right bottom 都设置 0 ,magin:auto;
.parent {
position: relative;
}
.child {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# flex 布局
设置内容主轴和交叉轴都居中
.parent {
display: flex;
justify-content: center; /* 弹性布局的左右居中对齐 */
align-items: center; /*弹性布局的垂直居中对齐*/
}
1
2
3
4
5
2
3
4
5
# flex 布局 子元素使用 margin:auto;
.parent {
display: flex;
}
.child {
margin: auto;
}
1
2
3
4
5
6
2
3
4
5
6
# grid 网格布局
.parent {
display: grid;
align-content: center;
justify-content: center;
}
1
2
3
4
5
2
3
4
5
# grid 网格布局 子元素自身居中
.parent {
display: grid;
}
.child {
align-self: center;
justify-self: center;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# table-cell 实现文字内容水平垂直居中
设置好之后 margin 属性失效
.child {
/* 文字居中展示 */
position: relative;
display: table-cell;
vertical-align: middle;
text-align: center;
top: 100px;
left: 75px;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# table 布局（不推荐）
.parent {
display: table;
}
.parent {
display: table-cell;
vertical-align: middle; /*文字居中*/
background-color: darkcyan;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 栅格布局小方块
/* 栅格布局小方块 */
.section-ten {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
.grid-item {
text-align: center;
line-height: 100px;
background-color: #15231f;
font-weight: bold;
color: #ffffff;
}
.grid-item:nth-child(2n) {
background-color: #ffffff;
color: #15231f;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
点击查看代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入ElementUI CDN -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<title>水平垂直居中展示</title>
</head>
<style type="text/css">
#app{
width: 100%;
margin: 50px auto;
/* 设置栅格布局 ， auto-fill 关键字，表示每列宽度300px,然后自动填充,直到容器不能放置更多的列*/
display: grid;
grid-template-columns: repeat(auto-fill, 300px);
}
.section{
margin-left: 20px;
margin-right: 20px;
margin-top: 50px;
height: 300px;
border: 1px solid;
}
.items{
background-color: coral;
border-radius: 5px;
width: 100px;
height: 100px;
overflow: hidden;
text-align: center;
font-size: 20px;
font-weight: bold;
}
/* 方法一:
绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%);
当前div的父级添加相对定位（position: relative;） */
.section-one{
position: relative;
}
.items-one{
position: absolute;
top: 50%;
left: 50%;
/* translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中 */
transform: translate(-50%,-50%);
background-color: red;
}
/* 方法二:
绝对定位方法:确定当前div的宽度和高度,采用margin值为当前div宽度高度一半的负值 */
.section-two{
position: relative;
}
.items-two{
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
background-color: coral;
}
/* 方法三:
绝对定位方法:绝对定位下top left right bottom 都设置0 ,magin:auto;*/
.section-three{
position: relative;
}
.items-three{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: yellow;
}
/* 方法四:
flex布局:父元素添加flex样式 ,父元素的宽高要设置*/
.section-four{
display: flex;
justify-content: center; /* 弹性布局的左右居中对齐 */
align-items: center; /*弹性布局的垂直居中对齐*/
}
.items-four{
background-color: greenyellow;
}
/* 方法五:
table-cell实现文字内容水平垂直居中 , 设置好之后margin属性失效 */
.section-five{
position: relative;
}
.items-five{
background-color: #6495ED;
/* 文字居中展示 */
display: table-cell;
vertical-align: middle;
text-align: center;
position: relative;
top: 100px;
left: 75px;
}
/* 方法六 ：
父元素设置:grid栅格布局,子元素 align-self: center; justify-self: center; 居中展示 */
.section-six{
display: grid;
}
.items-six{
align-self: center;
justify-self: center;
}
/* 方法七
父元素设置:grid栅格布局,align-content: center;justify-content: center; 居中展示*/
.section-seven{
display: grid;
align-content: center;
justify-content: center;
}
.items-seven{
background-color: powderblue;
}
/* 方法八：
父元素设置:flex布局,子元素上使用：margin:auto; 居中展示*/
.section-eight{
display: flex;
}
.items-eight{
background-color: crimson;
margin: auto;
}
/* 方法九：
父元素设置:flex布局,子元素上使用：margin:auto; 居中展示*/
.section-nine{
display: table;
}
.items-nine{
display:table-cell;
vertical-align: middle;
background-color:darkcyan;
}
/* 栅格布局小方块 */
.section-ten{
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
.grid-item{
text-align: center;
line-height: 100px;
background-color: #15231F;
font-weight: bold;
color: #FFFFFF;
}
.grid-item:nth-child(2n){
background-color: #FFFFFF;
color: #15231F;
}
</style>
<body>
<div id="app">
<div class="section section-one">
<div class="items items-one">1</div>
</div>
<div class="section section-two">
<div class="items items-two">2</div>
</div>
<div class="section section-three">
<div class="items items-three">3</div>
</div>
<div class="section section-four">
<div class="items items-four">4</div>
</div>
<div class="section section-five">
<div class="items items-five">
<p>123456</p>
</div>
</div>
<div class="section section-six">
<div class="items items-six">6</div>
</div>
<div class="section section-seven">
<div class="items items-seven">7</div>
</div>
<div class="section section-eight">
<div class="items items-eight">8</div>
</div>
<div class="section section-nine">
<div class="items items-nine">9</div>
</div>
<div class="section section-ten">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</div>
</body>
<!-- 引入vue组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
//注册使用vue
var Vue = window.Vue;
var app = new Vue({
el: '#app',
data() {
return {
}
},
methods: {
}
})
</script>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235