28
2020
09

如何实现垂直居中?

为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法。

 // HTML结构:

<div class="box box1">

    <span>垂直居中</span>

</div>


方法1:table-cell

// CSS:

.box1{

    display: table-cell;

    vertical-align: middle;

    text-align: center;        

}


方法2:display:flex

.box2{

    display: flex;

    justify-content:center; // 主轴

    align-items:Center;  // 交叉轴

}


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

.box3{position:relative;}

.box3 span{

    position: absolute;

    width:100px;

    height: 50px;

    top:50%;

    left:50%;

    margin-left:-50px;

    margin-top:-25px;

    text-align: center;

}


方法4:绝对定位和0

.box4 span{

  width: 50%; 

  height: 50%; 

  background: #000;

  overflow: auto; 

  margin: auto; 

  position: absolute; 

  top: 0; left: 0; bottom: 0; right: 0; 

}


方法5:translate

.box6 span{

    position: absolute;

    top:50%;

    left:50%;

    width:100%;

    transform:translate(-50%,-50%);

    text-align: center;

}


方法6:display:inline-block

.box7{

  text-align:center;

  font-size:0;

}

.box7 span{

  vertical-align:middle;

  display:inline-block;

  font-size:16px;

}

.box7:after{

  content:'';

  width:0;

  height:100%;

  display:inline-block;

  vertical-align:middle;

}


方法7:display:flex和margin:auto

.box8{

    display: flex;

    text-align: center;

}

.box8 span{margin: auto;}


方法8:display:-webkit-box

.box9{

    display: -webkit-box;

    -webkit-box-pack:center;

    -webkit-box-align:center;

    -webkit-box-orient: vertical;

    text-align: center

}


方法9:display:-webkit-box

<div class="floater"></div>  

<div class="content"> Content here </div>  


// CSS

.floater {

    float:left; 

    height:50%; 

    margin-bottom:-120px;

}

.content {

    clear:both; 

    height:240px; 

    position:relative;

}

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。