网页设计手法之“垂直居中”

在说垂直居中之前,我们先回顾一下 水平居中

  • 如果它是一个行内元素,对父元素应用 text-align: center 即可
  • 如果它是一个块级元素,对元素自身应用 margin: auto 即可

设计场景


  • 垂直居中是现实开发中常见的需求之一
  • 当要对宽高不固定的元素进行垂直居中的时候,开发的哥哥们就要挠头了

基于绝对定位的解决方案

  • 结构:
<div class="main">
  <h1>标题</h1>
  <p>固定宽高元素垂直居中</P>
</div>
  • 风格:
.main {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -50px;
    width: 200px;
    height: 100px;
}

之前在[《网页设计手法之“满幅的背景,定宽的内容”》][1]一文中,有讲过calc()函数,基于该函数,我们可以对上面的风格做个优化:

.main {
    position: absolute;
    left: calc(50% - 100px);
    top: calc(50% - 50px);
    width: 200px;
    height: 100px;
}

很显然,这个方法的最大局限性在于 元素的宽高必须是固定的;但很多时候,元素的大小是由其内容决定的,我们就得找一个 **百分比值是以自身的宽高为基准的属性 **

.main {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

基于视口单位的解决方案


当不使用绝对定位的时候,我们就会丢失left和top,此时我们面临的问题是:如何把这个元素的左上角放置在容器的正中心?

.main {
  width: 200px;
  margin: 50vh auto 0;
  transform: translateY(-50%);
}

结合了 固定宽度+margin 的水平居中方法
使用视口单位vh,即1vh表示视口高度的1%;它是以整个视口为参照标准的

注意:它只适用于在视口中居中的场景

基于FlexBox的解决方案


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

注意:
待居中元素的父元素 display: flex + 待居中元素的父元素的固定高度 + 待居中元素margin: auto,可以实现水平垂直方向上的居中;

如果浏览器不支持Flexbox,垂直居中就会丢失,居中的元素就会紧贴着顶部,看起来还是可以接受的,也算是一种 优雅降级
[1]:http://www.jianshu.com/p/a92f8f8f4d82

《CSS SECRETS》

推荐阅读更多精彩内容