in css3, use calc() to center vertically with vh and vw

Question

in what has to be a widely used case, using vh for height of a div, and using vm for font size.

css3

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

html - case 1

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

html - case 2

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

is there any way to use calc() and other css3 properties to vertically center the div.inner within the div.outer?

Answer 1

If you only use one line you can use line-height: 20vh;.

http://jsfiddle.net/jxu2T/

Answer 2

I know this is not an answer to your exact question, though I thought I'd mention it as a possible alternative.

I'm currently tackling a vertical alignment issue myself and until recently had relied on nasty javascript calculations to get the job done! This falls over if the element or parent elements are hidden.

If you are fine using CSS3, might I suggest looking into box-align? It seems to do the trick for me.

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

Answer 3

The best thing to do which isn't future proof is to use top padding.

Sadly calc() didn't work with vh, vm on Chrome (it was fixed 2014-04-30)