为什么带有css“ margin-top：calc（（100％）/ 2）”的h1元素显示在屏幕底部？

Question

为什么当我键入以下内容时，我的h1为什么没有出现在屏幕中间？

${this.state.clicked ? 'closed' : 'open'}

（谈论margin-top属性）

相反，它显示在屏幕底部，有人可以解释原因吗？

Answer 1

保证金百分比为always based on width。

Flexbox

您可以使用flexbox达到所需的效果，如下所示。

/* Remember that containers' heights are a percentage of their parents' heights */

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
}

.container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  flex: 0 0 auto;
  vertical-align: middle;
}

<div class="container">
  <h1>Hello World</h1>  
</div>

替代

Flexbox支持非常复杂的场景，但是对于这种特殊情况，使用vh（视口高度）单元是一种更简单的方法。

h1 {
  font-size: 24px;
  line-height: 32px;
  margin-top: calc(50vh - 16px);
}

<h1>Hello World</h1>

附加说明

我不确定您为什么在示例中使用calc()，但是如果您这样做，请确保放入spaces around the operators。除法运算符不需要空格，但这是一个很好的习惯。