如何让css⽂字垂直居中（下）
我是前端⼩⽩，正在做⼀个项⽬的⼩程序开发， css风格调整做得头头是道。在垂直居中⽅⾯，已经试过本⽂中的⼏个垂直居中 css风格设置，成功解决了本⼈的问题，故转载来备份。
以下是11个 CSS垂直居中实现⽅法：
1. 使⽤绝对定位和负外边距对块级元素进⾏垂直居中
html代码：
<div id="box">
<div id="child">我是测试DIV</div>
</div></pre>
css代码：
css设置文字垂直居中
#box {
width:300px;
height:300px;
background: #ddd;
position: relative;
}
#child {
width:150px;
height:100px;
background: orange;
position: absolute; top:50%;
margin:-50px 000;
line-height:100px;
}
运⾏结果如下：
这个⽅法兼容性不错，但是有⼀个⼩缺点：必须提前知道被居中块级元素的尺⼨，否则⽆法准确实现垂直居中。
2. 使⽤绝对定位和transform
html代码：
<div id="child">我是⼀串很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的⽂本</div></pre>
css代码：
#box {
width:300px;
height:300px;
background: #ddd;
position: relative;
}
#child {
background: #93BC49;
position: absolute;
top:50%;
transform:translate(0,-50%);
}
运⾏结果如下：
这种⽅法有⼀个⾮常明显的好处就是不必提前知道被居中元素的尺⼨了，因为transform中translate偏移的百分⽐就是相对于元素⾃⾝的尺⼨⽽⾔的。
3. 另外⼀种使⽤绝对定位和负外边距进⾏垂直居中的⽅式
html代码：
<div id="box">
<div id="child">我也是个测试DIV</div>
</div></pre>
css代码：
#box {
width:300px;
height:300px;
background: #ddd;
position: relative;
}
#child {
width:50%;
height:30%;
background: pink;
position: absolute;
top:50%;
margin:-15%000;
}
运⾏结果如下：
这种⽅式的原理实质上和前两种相同。补充的⼀点是：margin的取值也可以是百分⽐，这时这个值规
定了该元素基于⽗元素尺⼨的百分⽐，可以根据实际的使⽤场景来决定是⽤具体的数值还是⽤百分⽐。
4. 绝对定位结合margin: auto
html代码：
<div id="box">
<div id="child">呆呆今天退役了(。﹏。)</div>
</div></pre>
css代码：
#box {
width:300px;
height:300px;
background: #ddd;
position: relative;
}
#child {
width:200px;
height:100px;
background: #A1CCFE;
position: absolute; top:0;
bottom:0;
margin: auto;
line-height:100px;
}
运⾏结果如下：
这种实现⽅式的两个核⼼是：把要垂直居中的元素相对于⽗元素绝对定位，top和bottom设为相等的值，我这⾥设成了0，当然你也可以设为99999px或者-99999px⽆论什么，只要两者相等就⾏，这⼀步做完之后再将要居中元素的margin设为auto，这样便可以实现垂直居中了。
被居中元素的宽⾼也可以不设置，但不设置的话就必须是图⽚这种⾃⾝就包含尺⼨的元素，否则⽆法实现。
5. 使⽤padding实现⼦元素的垂直居中
html代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
今天西安的霾严重的吓⼈，刚看了⼀眼PM2.5是422
css代码： #box { width: 300px; background: #ddd; padding: 100px 0; } #child { width: 200px; height: 100px; background:
#F7A750; line-height: 50px; } 运⾏结果如下：
这种实现⽅式⾮常简单，就是给⽗元素设置相等的上下内边距，则⼦元素⾃然是垂直居中的，当然这时候⽗元素是不能设置⾼度的，要让它⾃动被填充起来，除⾮设置了⼀个正好等于上内边距+⼦元素⾼度+下内边距的值，否则⽆法精确的垂直居中。
这种⽅式看似没有什么技术含量，但其实在某些场景下也是⾮常好⽤的。
6. 设置第三⽅基准
html代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
今天写了第⼀篇博客，希望可以坚持写下去！
css代码： #box { width: www.588cctv 300px; height: 300px; background: #ddd; } #base { height: 50%; background:
#AF9BD3; } #child { height: 100px; background: rgba(131, 224, 245, 0.6); line-height: 50px; margin-top: -50px; } 运⾏结果如下：
这种⽅式也⾮常简单，⾸先设置⼀个⾼度等于⽗元素⾼度⼀半的第三⽅基准元素，那么此时该基准元素的底边线⾃然就是⽗元素纵向上的中分线，做完这些之后再给要垂直居中的元素设置⼀个margin-top，值的⼤⼩是它⾃⾝⾼度的⼀半取负，则实现垂直居中。
7. 使⽤flex布局
html代码：
1
2
3
4
5
6
7
8
9
雾霾天⽓，太久没有打球了
css代码： #box { width: 300px; height: 300px; background: #ddd; display: flex; align-items: center; } 运⾏结果如下：
这种⽅式同样适⽤于块级元素：
html代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
程序员怎么才能保护好眼睛？
css代码： #box { width: 300px; height: 300px; background: #ddd; display: flex; align-items: center; } #child { width: 300px; height: 100px; background: #8194AA; line-height: 100px; } 运⾏结果如下：
flex也就是flexible，意为灵活的、柔韧的、易弯曲的。
元素可以通过设置display:flex；将其指定为flex布局的容器，指定好了容器之后再为其添加align-items属性，该属性定义项⽬在交叉轴（这⾥是纵向轴）上的对齐⽅式，可能的取值有五个，分别如下：
flex-start:：交叉轴的起点对齐；
flex-end：交叉轴的终点对齐；
center：交叉轴的中点对齐；
baseline：项⽬第⼀⾏⽂字的基线对齐；
stretch（该值是默认值）：如果项⽬没有设置⾼度或者设为了auto，那么将占满整个容器的⾼度。
8. 第⼆种使⽤弹性布局的⽅式
html代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
答案当然是多⽤绿⾊的背景哈哈
css代码： #box { width: 300px; height: 300px; background: #ddd; display: flex; flex-direction: column; justify-content: center; } #child { width: 300px; height: 100px; background: #08BC67; line-height: 100px; } 运⾏结果如下：
这种⽅式也是⾸先给⽗元素设置display:flex，设置好之后改变主轴的⽅向flex-direction: column，该属性可能的取值有四个，分别如下：
row（该值为默认值）：主轴为⽔平⽅向，起点在左端；
row-reverse：主轴为⽔平⽅向，起点在右端；
column：主轴为垂直⽅向，起点在上沿；
column-reverse：主轴为垂直⽅向，起点在下沿。
justify-content属性定义了项⽬在主轴上的对齐⽅式，可能的取值有五个，分别如下（不过具体的对齐⽅式与主轴的⽅向有关，以下的值都是假设主轴为从左到右的）：
flex-start（该值是默认值）：左对齐；
flex-end：右对齐；
center：居中对齐；
space-between：两端对齐，各个项⽬之间的间隔均相等；
space-around：各个项⽬两侧的间隔相等。
9. 使⽤ line-height 对单⾏⽂本进⾏垂直居中
html代码：
1
2
3
4
5
6
7
8
我是⼀段测试⽂本
css代码： #box{ width: 300px; height: 300px; background: #ddd; line-height: 300px; } 运⾏结果如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。