# 技巧

# 如何让一个元素水平垂直居中

# 水平居中

行内元素：

.element {
  text-align: center;
}

1
2
3

块状元素：

已知宽度

/* 1. margin */
.element {
  margin: 0 auto;
}

/* 2： 根据绝对定位实现 & margin-left: -width/2 */
#container {
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid green;
}
#center {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  margin-left: -50px;
  border: 1px solid red;
}

/* 3. 根据display: table-cell & text-align: center */
#container {
  display: table-cell;
  width: 500px;
  height: 500px;
  text-align: center;
  border: 1px solid green;
}
#center {
  display: inline-block;
  width: 300px;
  height: 300px;
  border: 1px solid red;
}

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

未知宽度

/* 1. flex： 不支持ie9及其以下 */
.element {
  display: flex;
  justify-content: center;
}
/* 2： 利用绝对定位实现 & transformX */
#container {
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid green;
}
#center {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid red;
}
/* 3. 根据 table */
.element {
  display: table;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  border: 1px solid red;
}

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

# 垂直居中

/* 1. 只针对纯文字 */
.element {
  line-height: height;
}

/* 2. flex： 不支持ie9及其以下 */
.element {
  display: flex;
  align-items: center;
}
/* 3： 利用绝对定位实现 & transformY */
#container {
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid green;
}
#center {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid red;
}
/* 4： 利用display: table-cell 和 vertical-align: middle */
#container {
  display: table-cell;
  width: 500px;
  height: 500px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid green;
}
#center {
  display: inline-block;
  width: 300px;
  height: 300px;
  border: 1px solid red;
}

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

# 全站变灰

html {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(1);
}

1
2
3
4
5
6
7
8
9
10

← 总结代码规范 →