实现垂直居中的几种方法

2017-06-15 本文已影响0人巴斯光年lip

在css中对元素进行水平居中：如果它是一个行内元素，就对它的父元素应用text-align：center；如果它是一个块级元素，就对它自身应用margin：auto；。
首先我们定义一个宽和高分别为350px、150px的矩形：

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

* {
  margin:0;
}
.content {
  width:350px;
  height:150px;
  background:#ace;
}

效果如下：

1. 绝对定位
它要求元素具有固定的宽度和高度：

.content {
  width:350px;
  height:150px;
  background:#ace;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-75px;   /* 150/2 = 75 */
  margin-left:-175px;   /* 350/2 = 175 */
}

先把这个元素的左上角放置在视口的正中心，然后再利用负外边距把它向左、向上移动元素自身一半长度值。从而把元素的正中心放置在视口的中心，实现垂直居中的效果。
然而借助 calc() 函数，这段代码还可以省略：

.content {
  width:350px;
  height:150px;
  background:#ace;
  position:absolute;
  top: calc(50% - 75px);
  left: calc(50% - 175px);
}

显然，这个方法最大的局限在于它要求元素的宽高是固定的。
在通常情况下，对那些需要居中的元素来说，其尺寸往往是由其内容来决定的。如果能找到一个属性的百分比值以自身的宽高作为解析基准，就好了。那便是** translate（）变形**。

  position:absolute;
  top: 50%；
  left: 50%；
  transform:translate(-50%,-50%);

上面这个方法也有一些需要注意的地方：

我们有时不能选用绝对定位，因为它对整个布局的影响太过强烈。
如果需要居中的元素已经在高度上超过了视口，那它的顶部会被视口裁切掉。
某些浏览器中，这个方法可能会导致元素的显示有一些模糊，因为元素可能被放置在半个像素上，这个问题可以用 transform-style:preserve-3d 来修复，不过这个很难保证它在未来不会出现问题。

2 基于视口单位的解决方案
假如我们不用绝对定位，仍然可以用 translate() 技巧来把这个元素以其自身宽高的一半为距离进行移动。但是在缺少 left 和 top 的情况下，该怎么办呢？
首先想到的可能是用 margin 属性的百分比值来实现：

  margin:50% auto 0;
  transform:translateY(-50%);

不过结果却很离谱：

这时因为 margin的百分比值是以父元素的宽度作为解析基准的。不过如果只是想把元素相对于视口进行居中，仍然是有希望的：

vw是与视口宽度相关。1vw实际上表示视口宽度的1%，而不是100%。1vh 表示视口高度的1%。
当视口宽度小于高度时，1vmin 等于1vw，否则等于1vh。
当视口宽度大于高度时，1vmax 等于1vw，否则等于1vh。
在我们这个例子中，适用于外边距的是vh单位：

  margin:50vh auto 0;
  transform:translateY(-50%);

不过这个技巧的实用性是相当有限的，因为它只适用于在视口中居中的场景。

3 基于 Flexbox 的解决方案
这可以算是最佳的解决方案了，因为它是专门针对这类需求所设计的。我们只需要写两行声明即可：先给这个待居中元素的父元素设置display：flex，再给元素自身设置 margin：auto；

body {
  display:flex;
  min-height:100vh;
}
.content {
  margin:auto;
}

当我们使用 flexbox 时，margin：auto；不仅在水平方向上将元素居中，垂直方向上也如此。我们甚至不需要指定任何宽度。
如果浏览器不支持flexbox,页面渲染结果看起来就只是水平方向上居中。虽然没有垂直居中，但也还可以接受。
flex 的另外一个好处在于，它还可以将匿名容器（即没有被标签包裹的文本节点）垂直居中。假如结构代码是这样的：

<div class="content">你居中吧</div>

先给这个main元素指定一个固定的尺寸，然后借助 flexbox 规范所引用的 align-items 和 justify-content 属性，可以让内部的文本也实现居中。

body {
  display:flex;
  min-height:100vh;
  background:#F8F8F8;
}
.content {
  width:350px;
  height:150px;
  background:#ace;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

参考书籍：Lea Verou《CSS揭秘》

实现垂直居中的几种方法

猜你喜欢

热点阅读