對于最流行的表格布局法和行內(nèi)塊法不去考慮，只考慮用最新的現(xiàn)代CSS去實現(xiàn)

• 基于絕對定位的解決方案

1.早期解決方法：

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

顯然這個方法最大的局限在于它要求元素的寬高時固定的，而通常情況，對那些需要居中的元素來說其尺寸往往由其內(nèi)容決定的。

2.translate（）變形函數(shù)

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

缺點：

• 有時我們不能選用絕對定位，對布局影響太強(qiáng)烈
• 如果需要居中的元素已經(jīng)在高度上超過視口，那么他的頂部就會被視口裁切掉
• 某些瀏覽器，該方法會導(dǎo)致元素的顯示有些模糊，因為元素可能被放置在半個像素上，這個問題可以用transform-style:preserve-3d來修復(fù)，但是hack味道過重

3.基于視口單位的解決方案

CSS3中定位了一套新的單位，稱之為視口相關(guān)的長度單位。

• vw是與視圖寬度有關(guān)的，1vw是視口寬度的1%，而不是100%
• 與vw類似，1vh表示視口高度的1%
• 當(dāng)視口寬度小于高度時，1vmin等于1vw。否則等于1vh
• 當(dāng)視口寬度大于高度時，1vmax等于1vw，否則等于1vh

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

缺點： 只適用于視圖居中的場景

4.基于flexbox的解決方案

這是毋庸置疑的最佳解決方案，因為flex box（伸縮盒）是專門針對這種需求設(shè)計的。
我們只需兩行聲明即可：獻(xiàn)給這個待居中的父元素設(shè)置display：flex, 再給這個元素自身設(shè)置我們熟悉的不能再熟悉的margin：auto。

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

注意： 當(dāng)我們使用Flexbox時，margin：auto不僅在水瓶方向?qū)⒃鼐又?，垂直方向上也是如此?br> 還有一點，我們甚至不需要指定任何寬度：這個居中元素分配的寬度等于max-content(之前博客提到過的max-content)。

Flexbox好處在于： 它可以將匿名容器（即沒有被標(biāo)簽包裹的文本節(jié)點）垂直居中。
HTML:

<main>
   <h1>Am I centered yet?</h1> 
  <p>Center me, please!</p>
</main>

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 垂直居中