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

2021-01-20 06:42 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.     display: table-cell;   
  3.     vertical-align: middle;   
  4.     text-align: center;           
  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.             position: absolute;   
  4.             width:100px;   
  5.             height: 50px;   
  6.             top:50%;   
  7.             left:50%;   
  8.             margin-left:-50px;   
  9.             margin-top:-25px;   
  10.             text-align: center;   
  11.         }   

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

CSS Code拷贝內容到剪贴板
  1. .box4 span{   
  2.   width: 50%;    
  3.   height: 50%;    
  4.   background: #000;   
  5.   overflow: auto;    
  6.   margin: auto;    
  7.   position: absolute;    
  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.             position: absolute;   
  3.             top:50%;   
  4.             left:50%;   
  5.             width:100%;   
  6.             transform:translate(⑸0%,⑸0%);   
  7.             text-align: center;   
  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-align: center;   
  4. }   
  5. .box8 span{margin: auto;}   

方式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-align: center  
  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

为您推荐