Center an
tag inside a

Question

I have the following <div> inside a <body> tag:

<div id="AlertDiv"><h1>Yes</h1></div>

And these are their CSS classes:

#AlertDiv {
    position:absolute;
    height: 51px;
    left: 365px;
    top: 198px;
    width: 62px;
    background-color:black;
    color:white;
}

#AlertDiv h1{
    margin:auto;
    vertical-align:middle;
}

How can I vertically and horizontally align an <h1> inside of a <div>?

AlertDiv will be bigger than <h1>.

Marcel · Accepted Answer · 2011-06-06T16:16:45.013

47

You can add line-height:51px to #AlertDiv h1 if you know it's only ever going to be one line. Also add text-align:center to #AlertDiv.

#AlertDiv {
    top:198px;
    left:365px;
    width:62px;
    height:51px;
    color:white;
    position:absolute;
    text-align:center;
    background-color:black;
}

#AlertDiv h1 {
    margin:auto;
    line-height:51px;
    vertical-align:middle;
}

The demo below also uses negative margins to keep the #AlertDiv centered on both axis, even when the window is resized.

Demo: jsfiddle.net/KaXY5

edited Jun 06 '11 at 16:16

answered Jun 06 '11 at 16:05

Marcel

27,922
9
70
85

1

Yes, it will be only one line. Thanks for your answer. – VansFannel Jun 06 '11 at 16:07
2

This is really the only truly valid answer: you make height and line-height the same and then the vertical-align CSS attribute will work. After searching high and low for that this is all that came up. – Femi Jun 06 '11 at 16:13

score 12 · Answer 2 · answered Sep 24 '14 at 15:12

12

On the hX tag

width: 100px;
margin-left: auto;
margin-right: auto;

answered Sep 24 '14 at 15:12

bluehallu

10,205
9
44
61

1

Why is the width attribute required for the auto left/right to work? – brookr Jan 05 '17 at 20:01
in my case, juste by adding width, as the text was already align center, it worked! Thanks Very simple answer that works for most cases. – pollux1er Sep 14 '20 at 16:50

score 11 · Answer 3 · answered Jan 24 '14 at 12:11

11

There is a new way using transforms. Apply this to the element to centre. It nudges down by half the container height and then 'corrects' by half the element height.

position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);

It works most of the time. I did have a problem where a div was in a div in a li. The list item had a height set and the outer divs made up 3 columns (Foundation). The 2nd and 3rd column divs contained images, and they centered just fine with this technique, however the heading in the first column needed a wrapping div with an explicit height set.

Now, does anyone know if the CSS people are working on a way to align stuff, like, easily? Seeing that its 2014 and even some of my friends are regularly using the internet, I wondered if anyone had considered that centering would be a useful styling feature yet. Just us then?

answered Jan 24 '14 at 12:11

Luke Puplett

42,091
47
181
266

I use this technique to horizontally align some elements in situations where `text-align:center;` does not work correctly. `position:relative; left:50%;transform:translateX(-??%)...` "??" has to be tweaked depending on how wide the element is. I know it's kinda hacky, but seems to work on the screens I've tried it on so far. – whitebeard Aug 09 '15 at 11:59
I found that using `transform:translateX(-??em)` is, actually, more reliable across various screen sizes than `??%` – whitebeard Aug 11 '15 at 01:44
Aside - new video on centering by Chrome Devs team at Google is pretty cool https://www.youtube.com/watch?v=ncYzTvEMCyE – Luke Puplett Jan 18 '21 at 14:13

score 2 · Answer 4 · answered Jun 06 '11 at 16:09

2

<div id="AlertDiv" style="width:600px;height:400px;border:SOLID 1px;">
    <h1 style="width:100%;height:10%;text-align:center;position:relative;top:40%;">Yes</h1>
</div>

You can try the code here:

http://htmledit.squarefree.com/

answered Jun 06 '11 at 16:09

Matthew Riches

2,298
18
26

kei · Answer 5 · 2015-05-25T15:03:02.080

2

You could add padding to the h1:

#AlertDiv h1 {
  padding:15px 18px;
}

edited May 25 '15 at 15:03

answered Jun 06 '11 at 16:10

kei

20,157
2
35
62

score 2 · Answer 6 · answered Jun 06 '11 at 16:10

2

Started a jsFiddle here.

It seems the horizontal alignment works with a text-align : center. Still trying to get the vertical align to work; might have to use absolute positioning and something like top: 50% or a pre-calculated padding from the top.

answered Jun 06 '11 at 16:10

pixelbobby

4,368
5
29
49

score 1 · Answer 7 · answered Sep 16 '14 at 12:26

You can use display: table-cell in order to render the div as a table cell and then use vertical-align like you would do in a normal table cell.

#AlertDiv {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

You can try it here: http://jsfiddle.net/KaXY5/424/

Center an
tag inside a

tag inside a

7 Answers7

Linked

Center an tag inside a

tag inside a

7 Answers7

Linked

Center an
tag inside a