在css3中，使用calc（）以vh和vw垂直居中 [英] in css3, use calc() to center vertically with vh and vw

问题描述

在一个广泛使用的情况下，使用 vh 获取 div 的高度， code> vm 。

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

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

html - case 1

html - case 1

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

html - case 2

html - case 2

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

有任何方法使用 calc（）和其他 css3 属性中，以 div.outer c中的 div.inner / code>？

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

推荐答案

如果你只使用一行，你可以使用 ：20vh; 。

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

http： //jsfiddle.net/jxu2T/

这篇关于在css3中，使用calc（）以vh和vw垂直居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！