html - 在 css3 中，使用 calc() 以 vh 和 vw 垂直居中

Question

在必须广泛使用的情况下，使用vha 的高度div和vm字体大小。

css3

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

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

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

有什么方法可以使用和calc()其他css3属性来垂直居中？div.innerdiv.outer

score 2 · Accepted Answer

2

如果您只使用一条线，您可以使用line-height: 20vh;.

于 2013-05-11T13:23:49.460 回答

score 0 · Accepted Answer

我知道这不是您确切问题的答案，尽管我想我会提到它作为一种可能的选择。

我目前正在自己解决垂直对齐问题，直到最近还依靠讨厌的 javascript 计算来完成工作！如果元素或父元素被隐藏，这将失败。

如果您可以使用 CSS3，我是否建议您查看 box-align？它似乎对我有用。

score 0 · Accepted Answer

最好的办法是使用顶部填充，这不是未来的证明。

遗憾的是，在 Chrome 上calc() 无法使用 , （已于 2014 年 4 月 30 日修复）vhvm