Why does the h1 element with the css "margin-top: calc((100%)/2)" display at the bottom of the screen?

Question

Why doesn't my h1 show up in the middle of the screen when I type:

h1 {
    margin-top: calc((100%)/2);
    transition: color 0.5s linear, transform 0.5s ease-in-out;
}

(Talking about the margin-top property)

Instead, it's displayed at the bottom of the screen, can someone please explain why?

For that, you also need to post the rest of the code. It is working for me here: https://plnkr.co/edit/zMoIlF0SJUOqKQ0H3fdP?p=preview — m4n0, Jul 01 '18 at 01:25
Weird. https://next.plnkr.co/edit/nZQHeXMCN0imGbvH?open=lib%2Fscript.js — Nobody Special, Jul 01 '18 at 01:34

Tim M. · Accepted Answer · 2018-07-01T02:02:44.483

Margin percentages are always based on width.

Flexbox

You can achieve the desired effect with flexbox, as shown below.

/* 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>

Alternative

Flexbox supports very complex scenarios, but there is an easier way for this particular case, using the vh (viewport height) unit.

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

<h1>Hello World</h1>

Additional Note

I'm not sure why you used calc() in your example, but if you do, be sure to put spaces around the operators. Spaces are not required for the division operator, but it's a good habit to get into.

Why does the h1 element with the css "margin-top: calc((100%)/2)" display at the bottom of the screen?

1 Answers1