使用CSS对盒子水平垂直居中的几种方法

将盒子水平居中是一件不难办的事情,那么如何做到水平垂直同时居中呢?这时候就需要思考一下了。

就不贴效果图了,效果图都是水平垂直居中的。

方法一 flex布局

核心点在于,给父元素使用flex布局,并设置align-itemsjustify-contentcenter

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平垂直居中</title>
<style>
.box1 {
width: 500px;
height: 300px;
background-color: skyblue;
display: flex;
align-items: center;
justify-content: center;
}
.box2 {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>

方法二 CSS3 transform

这个方法的核心是采用transform: translate进行盒子的偏移,需要对子元素设置百分比的高度。

以X轴举例,假如子元素的width是x%,那么如果要让x%居中,它两边的距离(需要偏移的量)应当是(100%-x%)/2,那么translate里面需要填入的值为偏移量与原宽之比,也就是(100%-x%)/(2*x%)。如果是Y周,则变化的x%为height

这里我为了好算全都定成了50%,实际使用可能有除不开的,建议换成sass这样的高级装备。

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平垂直居中</title>
<style>
.box1 {
width: 500px;
height: 300px;
background-color: skyblue;
}
.box2 {
width: 50%;
height: 50%;
background-color: green;
transform: translate(50%, 50%);
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>

方法三 绝对定位+负margin偏移

需要将父元素的position设置为relative等能够脱离正常文档流显示的方式以便于子元素的盒子能套在里面,子元素的position设置为absolute做一个绝对定位,并将lefttop都设置为50%,此时盒子是不完全居中的,因为有他自己的大小,会导致偏右下一些,所以此时需要使用负margin做个补偿,偏移它长宽的大小。

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平垂直居中</title>
<style>
.box1 {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
.box2 {
width: 200px;
height: 100px;
background-color: green;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>

方法四 完全绝对定位+自动margin

与方法三差不太多,将四个位置的距离都置为0,并添加一行margin: auto,也可以实现水平垂直居中。

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平垂直居中</title>
<style>
.box1 {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
.box2 {
width: 200px;
height: 100px;
background-color: green;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>

方法五 ::after伪元素

改变子元素显示为行内元素,然后使用vertical-align:middle对齐after伪元素。

知识点补充:::after伪元素中特有的content,用于在CSS渲染中向此元素逻辑上的头部和尾部添加内容,这些改动不会在DOM里出现,也不会改变文档内容,不可复制,仅渲染。

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平垂直居中</title>
<style>
.box1 {
width: 500px;
height: 300px;
background-color: skyblue;
text-align: center;
}
.box2 {
width: 200px;
height: 100px;
background-color: green;
display: inline-block;
vertical-align: middle;
}
.box1::after {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>

打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!
  • Copyrights © 2018-2021 Shawn Zhou
  • Hexo 框架强力驱动 | 主题 - Ayer
  • 访问人数: | 浏览次数:

感谢打赏~

支付宝
微信