Search code examples
htmlcssstylesheetviewport-units

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

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?

Solution

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

    http://jsfiddle.net/jxu2T/