0

I would like to centre the header-headline div vertically in the middle of the header div but no matter what i try i cannot get it to sit in the middle. Can anyone advise?

HTML

<div class="main-wrapper-onepage">
<!-- header -->
<div class="header">
<div class="header-headline">Dan Morris</div>
</div>
<!-- header-end -->
</div>

CSS

.header {
    width:100%;
    height:667px;
    background-image:url(../images/header_background.jpg);
    background-size:cover;
    text-align:center;
}

.header-headline {
    width:100%;
    text-align:center;
    font-size:70px;
    color:#FFF;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    display:inline-block;
    vertical-align:top;

}

JSfiddle here: https://jsfiddle.net/w77pdnxh/

iamdanmorris
  • 307
  • 2
  • 6
  • 13
  • 3
    Possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) – Mike Cluck Mar 29 '16 at 21:17
  • 1
    When you say center, do you mean horizontally center or vertically center? When I run your jfiddle, it's centered horizontally for me. – JoeL Mar 29 '16 at 21:18
  • What browser versions do you need to support? Is HTML5 an option? If so, there's a good solution with flexboxes. Otherwise, you'll need to do some trickery with inline-block. – Alex Reinking Mar 29 '16 at 21:18
  • 2
    Also possibly related to [Vertically centering a div inside another div](http://stackoverflow.com/questions/6490252/vertically-centering-a-div-inside-another-div?rq=1) – Mike Cluck Mar 29 '16 at 21:18
  • Duplicated : [How can I center a div within another div](http://stackoverflow.com/questions/15376634/how-can-i-center-a-div-within-another-div) – Shady Alset Mar 29 '16 at 21:20
  • 1
    So basically, this is a very common problem and has been asked a million and a half times. Read the previously asked questions and you'll find your answers. – Mike Cluck Mar 29 '16 at 21:21
  • @iamdanmorris ok I posted the answer below for you. – JoeL Mar 29 '16 at 21:23

2 Answers2

2

You could vertically center the header using flexbox's align-items: center. Code as follows:

.header {
  ...
  display: flex;
  align-items: center;
}

JSFiddle Here

Alex Johnson
  • 1,504
  • 13
  • 20
0

Set the position of header-header to relative and then top:50% as shown in the jsfiddle below. header-header will be relative to the outer div and placed at a point halfway between the top and bottom.

https://jsfiddle.net/w77pdnxh/2/

JoeL
  • 710
  • 4
  • 18
  • 1
    Add in `margin-top: -50%;` to `.header-headline` to account for the size of the div and you've got it perfectly centered. – Mike Cluck Mar 29 '16 at 21:26
  • 1
    @MikeC When I was driving home from work last night this popped into my head that I forgot to account for div size. So good call on that :) – JoeL Mar 30 '16 at 14:12