Vertically centering content in a header?

Question

How do I vertically center an img and an h1 in a div? Right now I have a png and an h1 in a header but the content is automatically in the top left. How do I put it in the middle and keep it responsive? Here's my HTML:

header {
  text-align: center;
  max-height:680px;

}

<header>
  <h1 id="title">Lorem Ipsum</h1>
  <img id="arrows" src="images/arrows.png">
  <h3 id="sub-title">Lorem ipsum</h3>
</header>

edit: Sorry I should have mentioned that the header has a specific height. How do I put the text and image right in the middle of the header, both vertically and horizontally?

It's unclear what the problem is, because your code snippet shows everything in the middle. Isn't that what you want? — Chrillewoodz, Jul 07 '15 at 15:36
Do you want to horizontally center it or vertically in the same line? — Chrillewoodz, Jul 07 '15 at 15:37
it's horizontally centered. how do i vertically center it? like the title says... — pat, Jul 07 '15 at 15:38
They look vertically centered to me - http://jsfiddle.net/kztagk62/ — Paulie_D, Jul 07 '15 at 15:41
I think he needs the header to be positioned in the middle of the page. — m4n0, Jul 07 '15 at 15:45
possible duplicate of [How to align text vertically center in div with CSS?](http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css) — Woodrow Barlow, Jul 07 '15 at 15:47
That's not what the question says "How do I vertically center an img and an h1 in a div? ". Voting to close as **unclear** — Paulie_D, Jul 07 '15 at 15:47

score 2 · Accepted Answer · answered Jul 07 '15 at 15:46

I know two ways to align it vertically.

First way: `using table`

header {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.wrapper {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

<div class="wrapper">
    <header>
         <h1 id="title">Lorem Ipsum</h1>
         <img id="arrows" src="images/arrows.png">
         <h3 id="sub-title">Lorem ipsum</h3>
    </header>
</div>

Second way: `using relative position`

body, html {
    height: 100%;
}
div.wrapper {
    height: 100%;
}
header {
    text-align: center;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

<div class="wrapper">
    <header>
         <h1 id="title">Lorem Ipsum</h1>
         <img id="arrows" src="images/arrows.png">
         <h3 id="sub-title">Lorem ipsum</h3>
    </header>
</div>

score 0 · Answer 2 · answered Jul 07 '15 at 15:39

0

If you want them in a line and centered:

header{
  text-align: center;
}

h1, h3, img{
  display: inline-block;
  margin: 0 10px;
}

answered Jul 07 '15 at 15:39

Paul Redmond

3,101
1
24
50

score 0 · Answer 3 · answered Jul 07 '15 at 15:40

Centering it horizontally and vertically using Flexbox.

html,
body {
  height: 100%;
}
.flex-wrap {
  display: flex;
  justify-content: center;
  height: 100%;
}
header {
  align-self: center;
}

<div class="flex-wrap">
  <header>
    <h1 id="title">Lorem Ipsum</h1>
    <img id="arrows" src="http://placehold.it/300x300">
    <h3 id="sub-title">Lorem ipsum</h3>
  </header>
</div>

Vertically centering content in a header?

3 Answers3

First way: using table

Second way: using relative position

First way: `using table`

Second way: `using relative position`