移动端 css 实现垂直的几种方式

转自:https://www.cnblogs.com/hutuzhu/p/4450850.html

 

方法1: table-cell

1 <div class="box box1">
2     <span>垂直居中</span>
3 </div>
1 .box1{
2     display:table-cell;
3     vertical-align:middle;
4     text-align:center;
5 }

 

方法2: display:flex

1 .box2{
2     display:flex;
3     justify-content:center;
4     align-items:center;
5 }

 

 方法3: 绝对定位和负边距

 1 .box3{
 2     position:relative;
 3 }
 4 
 5 .box3 span{
 6     position absolute;
 7     width:100px;
 8     height50px;
 9     top:50%;
10     left:50%;
11     margin-left:-50px;
12     margin-top:-25px;
13     text-align:center;
14 }

 

方法4: 绝对定位和0

 1 .box4 span{
 2     width:50%;
 3     height:50%;
 4     background:#000;
 5     overflow:auto;
 6     margin:auto;
 7     position:absolute;
 8     top:0;
 9     left:0;
10     bottom:0;
11     right:0;
12 }

方法5: translate

1 .box6 span{
2     position:absolute;
3     top:50%;
4     left:50%;
5     width:100%;
6     transform:translate(-50%,-50%);
7     text-align:center;
8 }

方法6: display:inline-block

 1 .box7{
 2     text-align:center;
 3     font-size:0;
 4 }
 5 
 6 .box7 span{
 7     vertical-align:middle;
 8     display:inline-block;
 9     font-size:16px;
10 }
11 
12 .box7:after{
13     content:'';
14     width:0;
15     height:100%;
16     display:inline-block;
17     vertical-align:middle;
18 }

方法7: display:flex 和 margin:auto

1 .box8{
2     display:flex;
3     text-align:center;
4 }
5 
6 .box8 span{
7     margin:auto;
8 }

方法8: display:-webkit-box

1 .box9{
2     display:-webkit-box;
3     -webkit-box-pack:center;
4     -webkit-box-align:center;
5     -webkit-box-orient:vertical;
6     text-align:center;
7 }

方法9: display:-webkit-box

1 <div class="floater"></div>
2 <div class="content">
3     Content here
4 </div>
 1 .floater{
 2     float:left;
 3     height:50%;
 4     margin-bottom:-120px;
 5 }
 6 
 7 .content{
 8     clear:both;
 9     height:240px;
10     position:relative;
11 }

 

posted @ 2021-02-05 14:38  not1ng  阅读(68)  评论(0)    收藏  举报