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

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

• 如果它是一个行内元素，对父元素应用 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》