面试常见问题——垂直居中的几种方法

(前几天面试,被问到两次,没答好,找到这篇文章收藏学习一下 ,来自这里

做手机的页面,经常会遇到需要垂直居中的情况,这里把常用的 垂直居中的几种方法 整理下。

结构

<div class="box box1"><span>我是垂直居中元素</span></div>

方法1:dispaly:table-cell

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

方法2:display:flex

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

方法3:translate(-50%,-50%)

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

方法4:display:inline-block

.box4{
  text-align:center; 
  font-size:0;
}
.box4 span{
  vertical-align:middle; 
  display:inline-block; 
  font-size:16px;
}
.box4:after{
  content:'';
  width:0;
  height:100%;
  display:inline-block;
  vertical-align:middle;
}

方法5:margin:auto

.box5{ 
  display:flex; 
  text-align:center;
}
.box5 span{
  margin:auto;
}

方法6:display:-webkit-box

.box6{
  display:-webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center; 
  text-align:center;
}

效果

整理这些实际是想尝试下不同的布局。

2,5,6实际都是flexbox的方法,flexbox兼容比较麻烦,布局可以参考ionic栅格。

3需要定位,4需要有参照物,最简单的还是table的方法。

写了一个table-布局的demo,实现方法比较简单,兼容性也比较好。

网上也已经有table的栅格系统,retchat很多组件也用了table布局。

    原文作者:JingDing
    原文地址: https://segmentfault.com/a/1190000002451411
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞