在css3中，使用calc（）與vh和vw垂直居中

Question

在什么必須是一個廣泛使用的情況下，使用vh作為div高度，並使用vm作為字體大小。

CSS3

div.outer { height: 20vh; }
div.inner { font-size: 3vw; height: auto; }
div.inner2 { font-size: 2vw; }

HTML - 案例1

<div.outer>
  <div.inner>center me!</div>
</div>

HTML - 案例2

<div.outer>
  <div.inner>center me top!</div>
  <div.inner2>center me bottom!</div>
</div>

有沒有辦法使用calc()和其他css3屬性垂直居中div.inner內的div.outer ？

Answer 1

如果你只使用一行，你可以使用line-height: 20vh; 。

http://jsfiddle.net/jxu2T/

Answer 2

最好的辦法是使用頂部填充，這不是未來的證明。

可悲的是， calc() 無法與 vh ， vm在Chrome上運行（已修復2014-04-30）

Answer 3

我知道這不是你確切問題的答案，盡管我認為我會把它作為一種可能的選擇。

我目前正在處理垂直對齊問題，直到最近才依賴討厭的javascript計算來完成工作！ 如果隱藏元素或父元素，則會失敗。

如果你使用CSS3很好，我建議你看看盒子對齊嗎？ 它似乎為我做了伎倆。

http://www.w3schools.com/cssref/css3_pr_box-align.asp