CSS垂直居中之现代CSS 解决方案

对于最流行的表格布局法和行内块法不去考虑，只考虑用最新的现代CSS去实现

• 基于绝对定位的解决方案

1.早期解决方法：

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

显然这个方法最大的局限在于它要求元素的宽高时固定的，而通常情况，对那些需要居中的元素来说其尺寸往往由其内容决定的。

2.translate（）变形函数

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

缺点：

• 有时我们不能选用绝对定位，对布局影响太强烈
• 如果需要居中的元素已经在高度上超过视口，那么他的顶部就会被视口裁切掉
• 某些浏览器，该方法会导致元素的显示有些模糊，因为元素可能被放置在半个像素上，这个问题可以用transform-style:preserve-3d来修复，但是hack味道过重

3.基于视口单位的解决方案

CSS3中定位了一套新的单位，称之为视口相关的长度单位。

• vw是与视图宽度有关的，1vw是视口宽度的1%，而不是100%
• 与vw类似，1vh表示视口高度的1%
• 当视口宽度小于高度时，1vmin等于1vw。否则等于1vh
• 当视口宽度大于高度时，1vmax等于1vw，否则等于1vh

main {
   width: 18em;
   padding: 1em 1.5em;
   margin: 50vh auto 0;
   transform: translateY(-50%);
}

缺点： 只适用于视图居中的场景

4.基于flexbox的解决方案

这是毋庸置疑的最佳解决方案，因为flex box（伸缩盒）是专门针对这种需求设计的。
我们只需两行声明即可：献给这个待居中的父元素设置display：flex, 再给这个元素自身设置我们熟悉的不能再熟悉的margin：auto。

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

---

注意： 当我们使用Flexbox时，margin：auto不仅在水瓶方向将元素居中，垂直方向上也是如此。
还有一点，我们甚至不需要指定任何宽度：这个居中元素分配的宽度等于max-content(之前博客提到过的max-content)。

---

Flexbox好处在于： 它可以将匿名容器（即没有被标签包裹的文本节点）垂直居中。
HTML:

   
Am I centered yet?
 
  
Center me, please!

CSS:

* { margin: 0 }
body { 
   display: flex; 
   min-height: 100vh;
}
main { 
   padding: 1em 2em; 
   margin: auto;
   box-sizing: border-box; 
   background: #655; 
   color: white;
   text-align: center;
}
h1 {
   margin-bottom: .2em; 
   font-size: 150%;
}
body { 
   background: #fb3;
   font: 100%/1.5 sans-serif;
}

/** * Vertical centering - Flexbox solution for text */
body { 
display: flex;
 align-items: center;
 min-height: 100%; 
margin: 0;
}
html { 
height: 100% 
}
main { 
display: flex;
justify-content: center; 
align-items: center; 
width: 18em;
height: 10em; 
padding: 1em 1.5em; 
margin: 0 auto; 
box-sizing: border-box; 
background: #655;
color: white;
text-align: center;
}
h1 { margin: 0 0 .2em; font-size: 150%;}
p { margin: 0;}
body { background: #fb3; font: 100%/1.5 sans-serif;}

Flex 垂直居中