How do I vertically center an H1 in a div?

Question

First of all, my apologies. I know there are various solutions posted for this issue here, but for the life of me I can't get any of them to work.

For a responsive website I'm trying to center an h1 in a div.

Centering horizontally is not an issue, but I'm having problems getting it centered vertically. Presumably I'm doing something wrong or misunderstanding the explanations I found here (or maybe both).

So as I'm probably interpreting earlier solutions given the wrong way, could someone please explain what exactly I have to add to the code beneath to get the h1 to center vertically?

(To make this question relevant to as much people as possible, I've already stripped the code of all my previous attempts to do so myself.)

CSS:

html, body {
height: 100%;
margin: 0;
}

#section1 {
min-height: 90%; 
text-align:center
}

HTML:

<div class="section" id="section1">
<h1>Lorem ipsum</h1>
</div>

Get rid of the `h1` `padding` and `margin` and use `vertical-align` on the `div`. — emerson.marini, Dec 13 '13 at 09:19
@NiettheDarkAbsol yes, I've just tried it on fiddle. Bad comment. Haha — emerson.marini, Dec 13 '13 at 09:21
check out this link http://stackoverflow.com/questions/6254793/center-a-h1-tag-inside-a-div — dev1234, Dec 13 '13 at 09:29
@VikasGhodke: Yes, the solution you and Pete gave was the one I was looking for. Thank you all for your help! — Edward Touw, Dec 13 '13 at 09:53

Pete · Accepted Answer · 2015-09-15T14:22:52.680

151

you can achieve vertical aligning with display:table-cell:

#section1 {
    height: 90%; 
    text-align:center; 
    display:table;
    width:100%;
}

#section1 h1 {display:table-cell; vertical-align:middle}

Example

Update - CSS3

For an alternate way to vertical align, you can use the following css 3 which should be supported in all the latest browsers:

#section1 {
    height: 90%; 
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
}

Updated fiddle

edited Sep 15 '15 at 14:22

answered Dec 13 '13 at 09:30

Pete

57,112
28
117
166

3

Nice! align-items: center; was what I was looking for vertical alignment. Thanks. – Andy Aug 08 '17 at 16:21
2

Thanks for CSS3 alternative! – Sonhja May 04 '21 at 10:33
Nothing worked in my scenario. This is exactly what I'm looking for. Thanks a lot! – Dinith Rukshan Kumara Sep 18 '21 at 10:27

score 5 · Answer 2 · answered Dec 13 '13 at 09:31

5

You can achieve this with the display property:

html, body {
    height:100%;
    margin:0;
    padding:0;
}
#section1 {
    width:100%; /*full width*/
    min-height:90%;
    text-align:center;
    display:table; /*acts like a table*/
}
h1{
    margin:0;
    padding:0;
    vertical-align:middle; /*middle centred*/
    display:table-cell; /*acts like a table cell*/
}

Demo: http://jsfiddle.net/a3Kns/

answered Dec 13 '13 at 09:31

emerson.marini

9,331
2
29
46

Cheers! Went with Pete's solution, but essentially this works the same. Thank you for your help! – Edward Touw Dec 13 '13 at 10:09

score 1 · Answer 3 · answered Dec 13 '13 at 09:37

1

I've had success putting text within span tags and then setting vertical-align: middle on that span. Don't know how cross-browser compliant this is though, I've only tested it in webkit browsers.

answered Dec 13 '13 at 09:37

benadamstyles

467
1
4
11

Thanks! Suppose this should work too. Would accepted answer help you ensure it's cross-browser compliant? – Edward Touw Dec 13 '13 at 10:11
Looking back at my code, it's actually quite hacky, so the above `table` answer is better. My method requires an extra span set to `width: 0;`. But, in case you or anyone else is interested, see the jsfiddle [here](http://jsfiddle.net/LeedsEbooks/jWc68/) – benadamstyles Dec 13 '13 at 11:11

score 1 · Answer 4 · answered Dec 13 '13 at 09:40

HTML

<div id='sample'>
<span class='vertical'>Test Message</span>
</div>

CSS

    #sample 
    {
        height:100px;
         width:100%;
        background-color:#003366;
        display:table;
        text-align: center;

    }
    .vertical 
    {
           color:white;
         display:table-cell;
        vertical-align:middle;
}

Fiddle : Demo

Erkka Mutanen · Answer 5 · 2021-07-02T13:08:45.670

Flexbox is a solid well-supported way to center an h1 tag inside div.

<div class="section" id="section1">
  <h1>Lorem ipsum</h1>
</div>

This is the OP:s HTML. Let's keep it like that. Now working with CSS we can add display flex and some properties. Here is a working code snippet that shows how flexbox can do vertical alignment.

#root {
  width: 90vw;
  height: 90vh;
  border: 2px solid green;
}

#section1 {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 90%;
  border: 2px solid red;
  background-color: orange;
  text-align: center;
  /* this does align h1 if h1 is wider than its containing text */
}

#section1>h1 {
  flex: 1;
  /* this makes the h1 take all available width in its containing div, and makes text-align: center property work inside section1 */
  background-color: #666333;
  align-self: center/* this is finally the property that vertically aligns the h1 title inside its containing div */
}

<!DOCTYPE html>
<html>
<header>Demo</header>
<div id="root">
  <div id="section1">
    <h1>Title Centered</h1>
  </div>
</div>

</html>

Since the accepted answer's CSS3 option vertically aligns the containing div and not the h1 tag as requested, this answer shows how that h1 can be vertically aligned inside a pre-sized, larger containing div.

score -1 · Answer 6 · answered Sep 27 '19 at 20:30

-1

Just use padding top and bottom, it will automatically center the content vertically.

answered Sep 27 '19 at 20:30

Carloscar Tovar

35
1
5

How do I vertically center an H1 in a div?

6 Answers6

Linked

Related