🌙 水平居中
🌙 行内元素
父元素块级元素：父元素text-align: center
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平居中：父块级</title>
<style>
#father{
width: 666px;
height: 333px;
background-color: seagreen;
text-align: center;
}
</style>
</head>
<body>
<div id="father">
<span id="son">我想牵着你的手，从心动到古稀！---</span>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
效果如下：
父元素不是块级元素：父元素先设置为块级元素，在设置text-align: center
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平居中：父非块级</title>
<style>
#father {
width: 666px;
height: 333px;
background-color: seagreen;
text-align: center;
display: block;
}
</style>
</head>
<body>
<span id="father">
<span id="son">我想牵着你的手，从心动到古稀！---</span>
</span>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
效果如下：
🌙 块级元素
🌙 方案一
定宽度：谁居中，谁设置margin:0 auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平居中：块级元素-定宽</title>
<style>
#father{
width: 666px;
height: 333px;
background-color: seagreen;
}
#son{
width: 200px;
height: 111px;
background-color: skyblue;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="father">
<div id="son">我想牵着你的手，从心动到古稀！---</div>
</div>
</body>
</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
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
效果如下：
不定宽度：子元素设为行内或行内块元素display:inline/inline-block,父元素设置text-align:center
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平居中：块级元素-不定宽</title>
<style>
#father{
width: 666px;
height: 333px;
background-color: seagreen;
text-align: center;
}
#son{
background-color: skyblue;
display: inline;
}
</style>
</head>
<body>
<div id="father">
<div id="son">我想牵着你的手，从心动到古稀！---</div>
</div>
</body>
</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
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
效果如下：
🌙 方案二：使用定位属性
首先设置：
父元素：相对定位 `position:relative`
子元素：绝对定位`position:absolute` + `left:50%`
1
2
2
其次定宽的话：
子元素:
margin-left:设置位元素宽度的负一半
或者：
transform: translateX(-50%)
1
2
3
4
2
3
4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平居中：定位属性-定宽</title>
<style>
#father{
width: 666px;
height: 333px;
background-color: seagreen;
position: relative;
}
#son{
width: 200px;
height: 111px;
background-color: skyblue;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
/*margin-left: -100px;*/
}
</style>
</head>
<body>
<div id="father">
<div id="son">我想牵着你的手，从心动到古稀！---</div>
</div>
</body>
</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
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
效果如下：
那么不定宽的话：只能用transform: translateX(-50%);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平居中：定位属性-不定宽</title>
<style>
#father{
width: 666px;
height: 333px;
background-color: seagreen;
position: relative;
}
#son{
height: 111px;
background-color: skyblue;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
/*此处就不适用了*/
/*margin-left: -100px;*/
}
</style>
</head>
<body>
<div id="father">
<div id="son">我想牵着你的手，从心动到古稀！---</div>
</div>
</body>
</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
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
效果如下：
🌙 方案三：使用flexbox布局实现（宽度定不定都可以）
使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平居中：flexbox布局（宽度不论）</title>
<style>
#father {
width: 666px;
height: 333px;
background-color: seagreen;
/*水平居中flexbox */
display: flex;
justify-content: center;
}
#son {
height: 111px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="father">
<div id="son">我想牵着你的手，从心动到古稀！---</div>
</div>
</body>
</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
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
效果如下：
🌙 垂直居中
🌙 单行的行内元素
只需设置单行的行内元素的：行高（line-height）=盒子高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>垂直居中：单行的行内元素</title>
<style>
#father{
width: 666px;
height: 333px;
background-color: seagreen;
}
#son{
height: 111px;
line-height: 333px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="father">
<span id="son">我想牵着你的手，从心动到古稀！---</span>
</div>
</body>
</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
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
效果如下：
🌙 多行的行内元素
父元素：display:table-cell;vertical-align:center即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>垂直居中：多行的行内元素</title>
<style>
#father{
width: 666px;
height: 333px;
background-color: seagreen;
display: table-cell;
vertical-align: middle;
}
#son{
background-color: skyblue;
}
</style>
</head>
<body>
<div id="father">
<span id="son">我想牵着你的手，从心动到古稀！我想牵着你的手，从心动到古稀！我想牵着你的手，从心动到古稀！我想牵着你的手，从心动到古稀！---</span>
</div>
</body>
</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
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
效果如下：
🌙 块级元素
🌙 方案一：使用定位
首先设置：
父元素：相对定位 `position:relative`
子元素：绝对定位`position:absolute` + `top:50%`
1
2
2
其次定高的话：
子元素:
margin-top:设置位元素宽度的负一半
或者：
transform: translateY(-50%)
1
2
3
4
2
3
4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>垂直居中：定位属性-定高</title>
<style>
#father{
width: 666px;
height: 333px;
background-color: seagreen;
position: relative;
}
#son{
height: 120px;
background-color: skyblue;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
/*margin-top: -60px;*/
}
</style>
</head>
<body>
<div id="father">
<div id="son">我想牵着你的手，从心动到古稀！---</div>
</div>
</body>
</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
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
效果如下：
那么不定高的话：只能用transform: translateY(-50%);
子元素:
margin-top:设置位元素宽度的负一半
或者：
transform: translateY(-50%)
1
2
3
4
2
3
4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>垂直居中：定位属性-不定高</title>
<style>
#father{
width: 666px;
height: 333px;
background-color: seagreen;
position: relative;
}
#son{
background-color: skyblue;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
</style>
</head>
<body>
<div id="father">
<div id="son">我想牵着你的手，从心动到古稀！---</div>
</div>
</body>
</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
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
效果如下：
🌙 方案二：flexbox布局实现（不论高度）
只需给块状元素的父元素设置display: flex; align-items: center;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>垂直居中：flebox布局-不论高度</title>
<style>
#father{
width: 666px;
height: 333px;
background-color: seagreen;
display: flex;
align-items: center;
}
#son{
background-color: skyblue;
}
</style>
</head>
<body>
<div id="father">
<div id="son">我想牵着你的手，从心动到古稀！---</div>
</div>
</body>
</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
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
效果如下：
🌙 水平垂直居中
🌙 已知高度和宽度的元素
🌙 方案一：position+top/right/bottom/left
父元素:相对定位
子元素:绝对定位 + top: 0; right: 0; bottom: 0; left: 0; margin: auto;
1
2
2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平垂直居中：宽高定<1></title>
<style>
#father{
width: 666px;
height: 333px;
background-color: seagreen;
position: relative;
}
#son{
width: 200px;
height: 111px;
background-color: skyblue;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
</head>
<body>
<div id="father">
<div id="son">我想牵着你的手，从心动到古稀！--</div>
</div>
</body>
</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
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
效果如下：
🌙 方案二：position+margin
父元素:相对定位
子元素:绝对定位 + left: 50%; top: 50%; margin-left: 元素宽度的负一半; margin-top: 元素高度的负一半;
1
2
2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平垂直居中：宽高定<2></title>
<style>
#father{
width: 666px;
height: 333px;
background-color: seagreen;
position: relative;
}
#son{
width: 200px;
height: 120px;
background-color: skyblue;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -60px;
}
</style>
</head>
<body>
<div id="father">
<div id="son">我想牵着你的手，从心动到古稀！--</div>
</div>
</body>
</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
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
效果如下：
🌙 未知高度和宽度的元素
🌙 方案一：使用定位属性
父元素:相对定位
子元素:绝对定位 + left: 50%; top: 50%; + transform: translateX(-50%) translateY(-50%);
1
2
2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平垂直居中：宽高未知<1></title>
<style>
#father{
width: 666px;
height: 333px;
background-color: seagreen;
position: relative;
}
#son{
background-color: skyblue;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%)
}
</style>
</head>
<body>
<div id="father">
<div id="son">我想牵着你的手，从心动到古稀！</div>
</div>
</body>
</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
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
效果如下：
方案二：使用flex布局实现
父元素:
display:flex;
justify-content: center;
align-items: center;
1
2
3
4
2
3
4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平垂直居中：宽高未知<2></title>
<style>
#father{
width: 666px;
height: 333px;
background-color: seagreen;
display:flex;
justify-content: center;
align-items: center;
}
#son{
background-color: skyblue;
}
</style>
</head>
<body>
<div id="father">
<div id="son">我想牵着你的手，从心动到古稀！---</div>
</div>
</body>
</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
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
效果如下：
