清哥的小屋

1
  <div class="father">
2
    <div class="son">水平居中</div>
3
  </div>

1
1.  /* 行内元素 */
2
.father {
3
  text-align: center;
4
}
5
.son {
6
  background: red;
7
}
8

9
/* 块级元素 */
10
2. /* 已知宽度 */
11
.son {
12
  width: 200px;
13
  background: red;
14
  margin: 0 auto;
15
}
16
3. /* 未知宽度 */
17
.son {
18
  display: table;
19
  margin: 0 auto;
20
  background: red;
21
}
22

23
4. /* 转成行内元素 */
24
.father {
25
  text-align: center;
26
}
27
.son {
28
  display: inline-block;
29
}
30

31
5. /* flex布局 */
32
.father {
33
  display: flex;
34
  justify-content: center;
35
}

1
 <div class="father">
2
    <div class="son">垂直居中</div>
3
 </div>

1
1. /* 单行文本 */
2
.father {
3
  height: 100px;
4
  background: red;
5
}
6
.son {
7
  line-height: 100px;
8
}
9

10
2. /* 多行文本 */
11
.father {
12
  height: 100px;
13
  background: red;
14
  display: table;
15
}
16
.son {
17
  display: table-cell;
18
  vertical-align: middle;
19
}
20

21
3. /* 块级元素 垂直居中 */
22
.father {
23
  background: yellow;
24
  height: 200px;
25
  display: flex;
26
  align-items: center;
27
}
28

29
4. /* 子绝父相 + 子top + 负margin */
30
.father {
31
  position: relative;
32
  width: 200px;
33
  height: 200px;
34
  border: 1px solid #000;
35
}
36
.son {
37
  background: red;
38
  width: 100px;
39
  height: 100px;
40
  line-height: 100px;
41
  position: absolute;
42
  top: 50%;
43
  margin-top: -50px;
44
}
45

46
5. /* 子绝父相 子 margin: auto */
47
.father {
48
  width: 200px;
49
  height: 200px;
50
  position: relative;
51
  border: 1px solid #000;
52
}
53
.son {
54
  width: 100px;
55
  height: 100px;
56
  position: absolute;
57
  top: 0;
58
  bottom: 0;
59
  margin: auto;
60
  background: red;
61
}
62

63
6. /* 子绝父相 子transform */
64
.father {
65
  width: 200px;
66
  height: 200px;
67
  position: relative;
68
  border: 1px solid #000;
69
}
70
.son {
71
  width: 100px;
72
  height: 100px;
73
  position: absolute;
74
  top: 50%;
75
  transform: translate(0,-50%);
76
  background: red;
77
}

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

1
/* 父元素 flex布局 */
2
.father {
3
  display: flex;
4
  justify-content: center;
5
  align-items: center;
6
}
7

8
/* 子绝父相  子 margin: auto*/
9
.father {
10
  position: relative;
11
}
12
.son {
13
  position: absolute;
14
  top: 0;
15
  right: 0;
16
  bottom: 0;
17
  left: 0;
18
  margin: auto;
19
}
20

21
/* 子绝父相 子transform  未知宽度*/
22
.father {
23
  position: relative;
24
}
25
.son {
26
  position: absolute;
27
  top: 50%;
28
  left: 50%;
29
  transform: translate(-50%,-50%);
30
}
31

32
/* 子绝父相 子margin 已知宽度*/
33
.father {
34
  width: 200px;
35
  height: 200px;
36
  position: relative;
37
}
38
.son {
39
  width: 10px;
40
  height: 100px;
41
  position: absolute;
42
  top: 50%;
43
  left: 50%;
44
  margin-top: -50px;;
45
  margin-left: -50px;
46
}
47

48
/* table-cell */
49
.father {
50
  width: 200px;
51
  height: 200px;
52
  display: table-cell;
53
  text-align: center;
54
  vertical-align: middle;
55
  border: 1px solid #000;
56
}
57

58
.son {
59
  background: green;
60
  display: inline-block;
61
}
62

63
/* display: flex-box 水平垂直终极方法 解决各种难题 */
64
.father {
65
  display: -webkit-flex;
66
  display: -moz-box;
67
  display: -ms-flexbox;
68
  display: -webkit-box;
69
  display: flex;
70
  -webkit-box-align: center;
71
  -moz-box-align: center;
72
  -ms-flex-align: center;
73
  -webkit-align-items: center;
74
  align-items: center;
75
  -webkit-box-pack: center;
76
  -moz-box-pack: center;
77
  -ms-flex-pack: center;
78
  -webkit-justify-content: center;
79
  justify-content: center;
80
  width: 200px;
81
  height: 200px;
82
  background-color: orange;
83
  text-align: center;
84
}
85

86
.son {
87
  width: 100px;
88
  height: 100px;
89
  line-height: 100px;
90
  background-color: red;
91
}