HTML元素的完美垂直与水平居中技巧大全
最编程
2024-01-20 08:28:15
...
以下垂直水平居中的方法，都是div在body里垂直水平居中。
定位法
思路就是父元素设置相对定位，子元素设置绝对定位（父相子绝）；
子元素的左上角会被定位到父元素中心，这个时候再利用（负margin/负translate/cale函数）将子元素的中心校准到父元素的中心。
1. absolute + translate
最好用的定位居中，无需知晓子元素宽高，效果稳定
1<html lang="en">
2 <head>
3 <style>
4 html {
5 height: 100%;
6 }
7
8 body {
9 height: 100%;
10 position: relative;
11 }
12
13 div {
14 background-color: brown;
15 position: absolute;
16 top: 50%;
17 left: 50%;
18 transform: translate(-50%, -50%);
19 }
20 </style>
21 </head>
22
23 <body>
24 <div>我被垂直水平居中了</div>
25 </body>
26</html>
272. absolute + 负margin
这个方法的前提条件是：子元素宽高已知
1<html lang="en">
2<head>
3 <style>
4 html {
5 height: 100%;
6 }
7
8 body{
9 height: 100%;
10 position:relative;
11 }
12
13 div{
14 width: 200px;
15 height: 200px;
16 background-color: brown;
17 position: absolute;
18 top: 50%;
19 left: 50%;
20 margin-top: -100px;
21 margin-left: -100px;
22 }
23 </style>
24</head>
25
26<body>
27 <div>我被垂直水平居中了</div>
28</body>
29</html>
303. absolute + calc函数
这个方法的前提条件是：子元素宽高已知
与（absolute + 负margin）方法非常类似
1<html lang="en">
2 <head>
3 <style>
4 html {
5 height: 100%;
6 }
7
8 body{
9 height: 100%;
10 position: relative;
11 }
12
13 div {
14 width: 200px;
15 height: 200px;
16 background-color: brown;
17 position: absolute;
18 top: calc(50% - 100px);
19 left: calc(50% - 100px);
20 }
21 </style>
22 </head>
23
24 <body>
25 <div>我被垂直水平居中了</div>
26 </body>
27</html>
284. absolute + margin auto
此方法的前提条件是：子元素宽高已固定
否则会撑满父元素。不太常用
1<html lang="en">
2<head>
3 <style>
4 html {
5 height: 100%;
6 }
7
8 body{
9 height: 100%;
10 position:relative;
11 }
12
13 div{
14 width: 200px;
15 height: 200px;
16 background-color: brown;
17 position: absolute;
18 top: 0;
19 left: 0;
20 right: 0;
21 bottom: 0;
22 margin: auto;
23 }
24 </style>
25</head>
26
27<body>
28 <div>我被垂直水平居中了</div>
29</body>
30</html>
31flex法
flex盒子具有很强的排列功能。
以下方法都不需要知晓子元素宽高
1. flex + margin auto
史上最简单，一行样式就实现了垂直水平居中。
1<html lang="en">
2 <head>
3 <style>
4 html {
5 height: 100%;
6 }
7
8 body {
9 height: 100%;
10 width: 100%;
11 display: flex;
12 }
13
14 div {
15 background-color: brown;
16 margin: auto;
17 }
18 </style>
19 </head>
20
21 <body>
22 <div>我被垂直水平居中了</div>
23 </body>
24</html>
252. flex + justify-content + align-items
这个方法利用了弹性盒设置内部元素的排列方式，横轴+侧轴双居中
1<html lang="en">
2 <head>
3 <style>
4 html {
5 height: 100%;
6 }
7
8 body{
9 height: 100%;
10 width: 100%;
11 display: flex;
12 justify-content: center;
13 align-items: center;
14 }
15
16 div {
17 background-color: brown;
18 }
19 </style>
20 </head>
21
22 <body>
23 <div>我被垂直水平居中了</div>
24 </body>
25</html>
26表格法
display: table-cell
父元素转为表格元素，子元素转为行元素。
就可以使用表格的居中方式，来实现垂直水平居中
1<html lang="en">
2 <head>
3 <style>
4 body {
5 width: 500px;
6 height: 500px;
7 display: table-cell;
8 text-align: center;
9 vertical-align: middle;
10 }
11
12 div {
13 background-color: brown;
14 display: inline;
15 }
16 </style>
17 </head>
18
19 <body>
20 <div>我被垂直水平居中了</div>
21 </body>
22</html>
23