前端最佳PC端垂直居中和最佳移动端垂直居中解决方案

不管是初学CSS还是面试考题,如何垂直居中一直是个老生常谈的话题,可能你知道很多方法,但是到底哪一个最好往往还是模棱两可,因此将在这里一一探讨各种方法。

  • 基于绝对定位的解决方法
  • 兼容 IE6+
  • 优点 兼容性极好
  • 缺点 代码耦合,需要定宽高

代码如下:

div{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -3em;
    margin-left: -9em;
    width: 18em;
    height: 6em;
}

这段代码通过绝对定位,将元素偏移到左上50%的地方,此时将是垂直居中的状态,继续设置其宽高,此时将以左上角垂直居中的点为扩展向右下扩张,所以需要通过margin将其左上方向再次偏移宽高的一半,从而达到垂直居中的效果。

  • 基于绝对定位的解决方法(升级版)
  • 兼容 IE9+
  • 优点 代码简洁
  • 缺点 代码耦合,需要定宽高

代码如下:

div{
    position: absolute;
    top: calc(50% - 3em);
    left: calc(50% - 9em);
    width: 18em;
    height: 6em;
}

通过使用calc属性,省去不必要的代码。

  • 基于绝对定位的解决方法(最终版)
  • 兼容 IE9+
  • 优点 代码简洁,不用定宽高
  • 缺点 无法兼容IE8

代码如下:

div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
  • 基于绝对定位的解决方法(PC兼容版最佳实践)
  • 兼容 IE6+
  • 优点 代码简洁,不用定宽高
  • 缺点 需要绝对定位

代码如下:

div{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

通过使用绝对定位元素上下左右偏移设置为0,使其在水平和垂直方向都具有流动性,最后margin将从水平和垂直方向平分剩余空间。

  • 基于视口单位的解决方法
  • 兼容 IE9+
  • 优点 代码简洁,不用定宽高,不用绝对定位
  • 缺点 无法兼容IE8

在css3中,定义了一些新的单位vh,vw,vmin,vmax,1vh等于视口高度的1%,也就是100vh等于视口的100%vmin,vmax分别是视口中较小值和较大值,于是我们有以下代码:

div{
    width: 18em;
    margin: 50vh auto 0;
    transform: translate(-50%);
}
  • 基于Flexbox的解决方案(移动端最佳解决方案)
  • 兼容 IE9+
  • 优点 代码简洁,不用定宽高,不用绝对定位
  • 缺点 无法兼容IE8

Flexbox就是针对这个需求而被设计出来的,所以其便捷与简单性简直是开辟一个新天地,代码如下:

body{
    display: flex;
}
div{
    margin: auto;
}

看,就是这么简单,只需要一个容器设置flex布局,然后设置margin,它就会自动垂直居中,当然我们也可以不用容器,代码如下:

div{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18em;
    height: 10em;
    margin: auto;
}

通过align-items设置垂直居中,使用justify-content水平居中,最后使用margin均分剩余空间达到垂直居中效果,实在是美滋滋。

其它居中方法,可自行百度,这里不推荐:

  1. 行内文本垂直居中(近似垂直居中)
  2. 表格布局法(兼容性还可以)
    原文作者:落叶卢生
    原文地址: https://www.jianshu.com/p/2996a610de44
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞