纯CSS实现垂直居中的7种方法

  今天申请博客通过了,给大家讲讲我所看到过的纯css实现垂直居中的各种方法。为什么要把它作为第一篇文章呢?因为这是我刚开始接触前端学到的对我最有用的知识,希望大家也可以从中获益!

  在CSS中实现水平居中是非常简单的,行内元素设置其父元素的text-align:center,块级元素就对其自身应用magrin:auto。然而,实现垂直居中就有点麻烦了,首先它是极其常见的需求,看似简单,在实践中,往往难如登天,当设计尺寸不固定时尤其如此。以下是我找到的一些方法:

方法一:行高line-height

(1)单行文本居中

HTML代码(无特别标明,后面所有方法的HTML代码均为这个)

 <div class="box1">
 <div class="box2">垂直居中</div>
 </div>

CSS代码

 .box1{
   height: 100px;
3 }
 .box2{
  line-height: 100px;
 }

纯CSS实现垂直居中的7种方法

(2)图片垂直居中

HTML代码

 <div class="box1">
   <img src="data:images/bg-sun.png" alt="">
 </div>

CSS代码

 .box1{
   line-height:200px;
 }
 .box1 img{
   vertical-align: middle;
 }

纯CSS实现垂直居中的7种方法

方法二:table-cell

CSS代码

 .box1{
   display: table-cell;
   vertical-align: middle;
   text-align: center;
 }

纯CSS实现垂直居中的7种方法

方法三:display:flex

(1)CSS代码

 .box1{
   display: flex;
 }
 .box2{
   margin:auto;
 }

纯CSS实现垂直居中的7种方法

(2)CSS代码

 .box1{
   display: flex;
   justify-content:center;
   align-items:center;
 }

纯CSS实现垂直居中的7种方法

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

(1)CSS代码

 .box1{
   position: relative;
 }
   .box2{
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -10px;/*减去子元素高度一半*/
   margin-left:-32px;/*减去子元素宽度一半*/
 }

纯CSS实现垂直居中的7种方法

(2)CSS代码

 .box2{
   position: absolute;
   top:calc(50% - 10px);/*减去子元素高度一半*/
   left:calc(50% - 32px);/*减去子元素宽度一半*/
 }

纯CSS实现垂直居中的7种方法

方法五:绝对定位和0

HTML代码

 <div class="box1">
   <div class="box2"></div>
 </div>
 </body>

CSS代码

 .box2{
   width: 50%;
   height: 50%;
   background: #555;
   overflow: auto;
   margin: auto;
   position: absolute;
 ;;;;
     }

纯CSS实现垂直居中的7种方法

方法六:translate

(1)CSS代码

 .box2{
   position: absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);
 }

纯CSS实现垂直居中的7种方法

(2)HTML代码

 <body>
 <div class="box1">
 </div>
 </body>

CSS代码

 .box1{
   width: 200px;
   height: 200px;
   background: #666;
   margin: 50vh auto 0;
   transform: translateY(-50%);
 }

纯CSS实现垂直居中的7种方法

方法七:display:-webkit-box

HTML代码

 <body>
 <div class="box1">垂直居中</div>
 </body>

CSS代码

 .box1{
   display: -webkit-box;
   -webkit-box-pack:center;
   -webkit-box-align:center;
   -webkit-box-orient: vertical;
   text-align: center
 }

纯CSS实现垂直居中的7种方法

上一篇:css实现垂直居中的几种方法


下一篇:Js 正则表达式知识测试