纯css 实现(多行)文字垂直居中常用方法

香菊网 发表于: 2019-05-09 分类: css  H5部分  前端front  HTML&CSS  

垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法。有了css3,针对移动端的垂直居中就更加多样化。

垂直居中有很多种

<div class="fixBox">

  <span clas="fixItem">文字垂直居中</span>

</div>

1、line-height

.fixBox{
  width:300px;
  height:300px;
  text-align: center;
}
.fixItem {
  display: block;
  line-height: 300px;
}

2、table-cell 

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

3、display:flex

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

4、绝对定位和transForm

.fixBox{position:relative;}
.fixBox span{
  position: absolute;
  width:100px;
  height: 50px;
  top:50%;
  left:50%;
  text-align: center;
  transform: translate(-50%, -50%);
}

在实际开发中 pc 端还好,移动端由于适配机型, 总会有很多千奇百怪的事情发生,有的开发商为了做系统优化, 很多东西都有阉割。

标签: cssH5部分前端frontHTML&CSS
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮