CODEWITHSUNDEEP
javascriptjqueryhtmlcss
iamdanmorris
iamdanmorris

Reputation: 357

center div in the vertically in middle of another div

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/

Upvotes: 0

Views: 243

Answers (2)

JoeL
JoeL

Reputation: 710

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/

Upvotes: 0

Alex Johnson
Alex Johnson

Reputation: 1574

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

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

JSFiddle Here

Upvotes: 2

Related Questions