html元素【垂直水平居中】方法合集

心念

发布于 2023-01-11 20:55:48

1.9K0

发布于 2023-01-11 20:55:48

文章被收录于专栏：前端心念

以下垂直水平居中的方法，都是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>
27

2. 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>
30

3. 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>
28

4. 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>
31

flex法

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>
25

2. 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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

absolute