css 实现三列分散居中对齐_flex 3列居中

作者：笔触狂放9 | 2024-03-23 13:47:59

踩

flex 3列居中

css 实现三列分散居中对齐

在这篇文章中，我们将使用几种不同的方法实现三列分散居中对齐，效果图如下：
在这里插入图片描述

一、使用flex实现对齐

<!DOCTYPE html>
<html>
<head>
<style>
 
.box_container {
    width: 700px;
    height: 300px;
    background-color: yellow;
    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    
}
 
.box_left {
    width: 150px;
    height: 80px;
    background-color: red;
    text-align: center;
    line-height:80px;
}
 
.box_center {
    width: 150px;
    height: 80px;
    background-color: blue;
    text-align: center;
    line-height:80px;
}
 
.box_right {
    width: 150px;
    height: 80px;
    background-color: green;
    text-align: center;
    line-height:80px;
}

</style>
</head>
<body>
 
<div class="box_container">
    <div class="box_left">left</div>
    <div class="box_center">center</div>
    <div class="box_right">right</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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

解析：
（1）flex 是弹性盒子，justify-content: space-between;是指与主轴方向内容向两端对齐， align-items: center;是指与交叉轴的方向居中对齐。交叉轴是指与主轴的垂直交汇的轴线。

（2）弹性盒子的实现方法相对其它方式更简便，不熟练的话，请前往flex语法教程学习

二、使用绝对定位position和translate 实现

<!DOCTYPE html>
<html>
<head>
<style>
 
.box_container {
    width: 700px;
    height: 200px;
    background-color: yellow;
    position: relative;
}
 
.box_left {
    width: 150px;
    height: 80px;
    background-color: red;
    text-align: center;
    line-height:80px;
    
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
}
 
.box_center {
    width: 150px;
    height: 80px;
    background-color: blue;
    text-align: center;
    line-height:80px;
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
 
.box_right {
    width: 150px;
    height: 80px;
    background-color: green;
    text-align: center;
    line-height:80px;
    
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translate(0, -50%);
}
</style>
</head>
<body>
 
<div class="box_container">
    <div class="box_left">left</div>
    <div class="box_center">center</div>
    <div class="box_right">right</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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

解析：
（1）父类box_container需要定义 position: relative;否则子元素会继续向上找参照物，全部没找到则以浏览器为参照物，父类是需要定义width,否则是以浏览器的宽度进行计算。

（2）position设置absolute时，脱离标准流的约束，标准流是向下添加元素的，脱离标准流就可以使目标元素位于同一行上。

（3）先看实例中的居中对齐，top:50%; left:50%; 是指元素的左上角坐标以父类的50%的宽度和高度进行对齐，但左上角非中心点，所以还需要移动到中心位置，故需要使用translate来移动坐标。

（4）移动坐标使用 transform: translate(-50%, -50%); ，这里的50%是指自身元素的宽高，分别为x轴和y轴方向移动，使中心点对齐。由于以元素的左上角对齐，需要减去自身元素宽高的一半，故定义为-50%。

三、使用position和margin方法来实现

.box_container {
    width: 700px;
    height: 200px;
    background-color: yellow;
    position: relative;
    
}
 
.box_left {
    width: 150px;
    height: 80px;
    background-color: red;
    text-align: center;
    line-height:80px;
    
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
 
.box_center {
    width: 150px;
    height: 80px;
    background-color: blue;
    text-align: center;
    line-height:80px;
    
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    
}
 
.box_right {
    width: 150px;
    height: 80px;
    background-color: green;
    text-align: center;
    line-height:80px;
    
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
<div class="box_container">
    <div class="box_left">left</div>
    <div class="box_center">center</div>
    <div class="box_right">right</div>
</div>
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

解析：
(1)margin:auto自动分配特性可实现居中对齐. margin:auto=margin:auto auto auto auto, 表示上右下左都是auto. 另外 margin: 0 auto= margin:0 auto 0 auto, 表示上下为0，左右为auto.

(2)先看实例中的居中对齐，top:0; 上端对齐父节点的Y坐标顶端，bottom=0; 表示下端对齐父节点的Y坐标顶底部，由此确认了范围，再通过元素自身的高度和margin:auto自动分配margin,使其自动沿Y坐标对齐。同样left:0;和right:0;确认X坐标方向的居中对齐。

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

css 实现三列分散居中对齐_flex 3列 居中