首先讨论一下单行时的情况。
毫无疑问，这是最简单的一种情况。
HTML结构如下：
12 111111111111111111111111111111111111 3
高度不固定（这种方法同样适用于多行文时的情况，下面就不再讨论）
1 .demo {
2 text-align: center;
3 padding-top: 20px;
4 padding-bottom: 20px;
5 }高度固定
1 .demo {
2 text-align: center;
3 height: 100px;
4 line-height: 100px;
5 }接下来，讨论下多行时的情况。
HTML结构如下：
12 111111111111111111111111111111111111
22222222222222222222 3
高度不固定时只需要添加pading值就可以，不多加讨论了。
高度固定时
方法一：父元素设置display: table，子元素设置display:table-cell。利用了表格的特性。
1 .demo {
2 height: 100px;
3 display: table;
4 margin-left: auto;
5 margin-right: auto;
6 }
7 .demo span {
8 display: table-cell;
9 vertical-align: middle;
10 }方法二：父元素设置position: relative，子元素设置position: absolute。主要是利用了translate的中心是相对于元素本身的特点。
1 .demo {
2 position: relative;
3 height: 100px;
4 }
5
6 .demo span {
7 position: absolute;
8 left: 50%;
9 top: 50%;
10 -webkit-transform: translate(-50%, -50%);
11 -ms-transform: translate(-50%, -50%);
12 transform: translate(-50%, -50%);
13 }方法三：利用flex布局。
1 .demo {
2 height: 100px;
3 display: -webkit-box;
4 display: -webkit-flex;
5 display: -ms-flexbox;
6 display: flex;
7 -webkit-box-pack: center;
8 -webkit-justify-content: center;
9 -ms-flex-pack: center;
10 justify-content: center;
11 -webkit-box-align: center;
12 -webkit-align-items: center;
13 -ms-flex-align: center;
14 align-items: center;
15 }方法四：利用:after,:before伪类，结合inline-block的特性实现垂直居中。
1 .demo {
2 height: 100px;
3 text-align: center;
4 }
5
6 .demo:after, .demo:before {
7 display: inline-block;
8 vertical-align: middle;
9 width: 0;
10 height: 100%;
11 visibility: hidden;
12 content: '';
13 }
14
15 .demo span {
16 display: inline-block;
17 vertical-align: middle;
18 }暂时就想到这些了。
Copyright © 2019-2025 51dongshi.net 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
