How to center element relative to header?

Question

<header>
    <h1><a href="/">Blog</a></h1>
</header>

The h1 can't be centered vertically with vertical-align and if I apply margin, it's relative to the page and not to the header.

Answer 1

vertical-align Works for inline elements or table-cells. h1 is a block by default. What you can do is set the line-height of your header to be the same as the height. Here is an example:

header {
  background-color: red;
  height: 150px;
  line-height: 150px;
}

a {
  text-decoration: none;
}

<header>
    <h1><a href="/">Blog</a></h1>
</header>

Answer 2

Use this:

h1:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

Answer 3

You can also use flex for this here is the example.

header{
display:flex;
width:100%;
height:150px; 
background-color:#0077dd;
color:#fff;
    align-items: center;
}

<header>
<div class="element">This is element</div>
</header>

This is the only vertical example if you need the horizontal example.