让元素水平垂直居中的四种方法_弹性布局水平垂直居中

作者：小小林熬夜学编程 | 2024-06-11 10:08:23

踩

弹性布局水平垂直居中

让元素水平垂直居中的四种方法

前言
一、使用 flex 弹性布局
二、使用 transform 变形
三、使用 position 定位
四、使用 transform 与 position 结合
五、总结

前言

让元素水平居中有很多方法，比如设置 text-align:center；比如设置margin:auto；再比如使用弹性布局，display:flex，justify-content:center。但是让元素垂直居中，或者是水平垂直居中却不是那么容易，今天就给大家分享一下四种让元素水平垂直居中的方法，实现如下效果。
在这里插入图片描述

一、使用 flex 弹性布局

首先将父元素设置为 display:flex；justify-content: center；align-items: center;
其次将父元素高度设置为 height:100vh，根据 css3 的规范，1vh 等于视口高度的1%（1vw 等于视口宽度的1%），那么 100vh 就是适口高度的 100%，即占满整个屏幕。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>React App</title>
</head>
<style>
    body{
        margin: 0;
    }
    #father{
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(0,0,0,0.7);
        height:100vh;
    }
    #son{
        width: 80%;
        height: 60%;
        background: white;
        border-radius: 30px;
    }
</style>
<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

二、使用 transform 变形

同样父元素高度设置为 height:100vh；
将子元素的宽和高设置为百分数，如宽设置为 80%，则需要向 X 轴偏移 10%；那么 translateX 为10/80 = 0.125，即 12.5%；如果高设置为 60%，则需要向 Y 轴偏移 20%，那么 translateY 为20/60 = 33%，即子元素需要设置 transfrom:translate(12.5%,33%)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>React App</title>
</head>
<style>
	body{
	margin:0
	}
    #father{      
        background: rgba(0,0,0,0.7);
        height:100vh;
    }
    #son{
        width: 80%;
        height: 60%;
        background: white;
        border-radius: 30px;
        transform: translate(12.5%,33%);
    }
</style>
<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

三、使用 position 定位

将父元素设置为 position :fixed，然后上下左右都为 0；使其填满整个屏幕；
子元素也设置为 position :fixed，然后上下左右都为 0；margin 设置为 auto，实现水平垂直居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>React App</title>
</head>
<style>
	body{
	margin:0
	}
    #father{      
        background: rgba(0,0,0,0.7);
        position:fixed;
        left:0;
        right:0;
        top:0;
        bottom:0;
    }
    #son{
        width: 90%;
        height: 60%;
        background: white;
        border-radius: 30px;
        margin:auto;
        positon:fixed;
        left:0;
        right:0;
        top:0;
        bottom:0;
    }
</style>
<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

四、使用 transform 与 position 结合

将父元素设置为 positon:fixed，然后上下左右都为 0；使其填满整个屏幕；
子元素也设置为 positon:fixed，然后上下各设为 50%；即位置到达中心点，但是元素也有高宽度，所以整体就偏移了，应当上下都回退25%的距离，即设置为 transform:translate(-50%,-50%)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>React App</title>
</head>
<style>
    body{
        margin:0
    }
    #father{
        background: rgba(0,0,0,0.7);
        position:fixed;
        left:0;
        right:0;
        top:0;
        bottom:0;
    }
    #son{
        width: 90%;
        height: 60%;
        background: white;
        border-radius: 30px;
        position:fixed;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
    }
</style>
<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

五、总结

以上四种方法中除了第二种，只使用 transform 属性，是需要依赖子元素高宽之外，其他方法均不受子元素宽高影响。
想要实现这种水平垂直居中，就要想办法让父元素填充整个屏幕，比如设置 height:100vh 或者设置 position:fixed;left:0;right:0;top:0;bottom:0。
使用弹性布局时，垂直水平居中的要点在父元素。将父元素设置为 display:flex; justify-content: center;align-items: center。
不使用弹性布局时，垂直水平居中的要点在子元素，设置子元素 transform 属性的 translate 使其水平垂直居中。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/702713