纯CSS完成竖直垂直居中的9种方式

2020-10-18 12:43 jianzhan

为完成优良的适配性,PC端完成竖直垂直居中的方式1般是根据肯定精准定位,table-cell,负边距等方式。有了css3,对于挪动端竖直垂直居中就更为多样化。

方式1:table-cell

html构造:

XML/HTML Code拷贝內容到剪贴板
  1. <div class="box box1">  
  2.         <span>竖直垂直居中</span>  
  3. </div>  

css:

CSS Code拷贝內容到剪贴板
  1. .box1{   
  2.     displaytable-cell;   
  3.     vertical-alignmiddle;   
  4.     text-aligncenter;           
  5. }   


方式2:display:flex

CSS Code拷贝內容到剪贴板
  1. .box2{   
  2.     display: flex;   
  3.     justify-content:center;   
  4.     align-items:Center;   
  5. }   

方式3:肯定精准定位和负边距

CSS Code拷贝內容到剪贴板
  1. .box3{position:relative;}   
  2. .box3 span{   
  3.             positionabsolute;   
  4.             width:100px;   
  5.             height50px;   
  6.             top:50%;   
  7.             left:50%;   
  8.             margin-left:-50px;   
  9.             margin-top:-25px;   
  10.             text-aligncenter;   
  11.         }   

方式4:肯定精准定位和0

CSS Code拷贝內容到剪贴板
  1. .box4 span{   
  2.   width: 50%;    
  3.   height: 50%;    
  4.   background#000;   
  5.   overflowauto;    
  6.   marginauto;    
  7.   positionabsolute;    
  8.   top: 0; left: 0; bottombottom: 0; rightright: 0;    
  9. }   

这类方式跟上面的一些相近,可是这里是根据margin:auto和top,left,right,bottom都设定为0完成垂直居中,很奇异吧。但是这里得明确內部元素的高宽比,能够用百分比,较为合适挪动端。

方式5:translate

CSS Code拷贝內容到剪贴板
  1. .box6 span{   
  2.             positionabsolute;   
  3.             top:50%;   
  4.             left:50%;   
  5.             width:100%;   
  6.             transform:translate(⑸0%,⑸0%);   
  7.             text-aligncenter;   
  8.         }   

这具体上是方式3的形变,移位是根据translate来完成的。

方式6:display:inline-block

CSS Code拷贝內容到剪贴板
  1. .box7{   
  2.   text-align:center;   
  3.   font-size:0;   
  4. }   
  5. .box7 span{   
  6.   vertical-align:middle;   
  7.   display:inline-block;   
  8.   font-size:16px;   
  9. }   
  10. .box7:after{   
  11.   content:'';   
  12.   width:0;   
  13.   height:100%;   
  14.   display:inline-block;   
  15.   vertical-align:middle;   
  16. }   

这类方式的确恰当...根据:after来占位。

方式7:display:flex和margin:auto

CSS Code拷贝內容到剪贴板
  1. .box8{   
  2.     display: flex;   
  3.     text-aligncenter;   
  4. }   
  5. .box8 span{marginauto;}   

方式8:display:-webkit-box

CSS Code拷贝內容到剪贴板
  1. .box9{   
  2.     display: -webkit-box;   
  3.     -webkit-box-pack:center;   
  4.     -webkit-box-align:center;   
  5.     -webkit-box-orient: vertical;   
  6.     text-aligncenter  
  7. }   

css3远大精工细作,能够完成许多造就性的实际效果,必须好好科学研究下。

今日又发现1种方式,如今补上:

方式9:display:-webkit-box

这类方式,在 content 元素外插进1个 div。设定此 div height:50%; margin-bottom:-contentheight;。

content 消除波动,并显示信息在正中间。

XML/HTML Code拷贝內容到剪贴板
  1. <div class="floater"></div>     
  2. <div class="content"> Content here </div>       
CSS Code拷贝內容到剪贴板
  1. .floater {   
  2.     float:left;    
  3.     height:50%;    
  4.     margin-bottom:-120px;   
  5. }   
  6. .content {   
  7.     clear:both;    
  8.     height:240px;    
  9.     position:relative;   
  10. }   

优势:
可用于全部访问器
沒有充足室内空间时(比如:对话框变小) content 不容易被断开,翻转条出現

缺陷:
唯1我能想起的便是必须附加的空元素了(也没那末糟,又是此外1个话题)

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助。

原文:http://www.cnblogs.com/hutuzhu/p/4450850.html