How to make a div center align in HTML

Question

Possible Duplicate:
How to horizontally center a div?

One simple way to make an object centered in HTML is using align='center', but it's not working for a div.

I tried:

style='text-align:center';
style='left:50%';

I even true a center tag

<center>

But I can't make my target div to be center.

Are you trying to center the div itself, or the text within the div? — Welbog, Apr 22 '10 at 13:28
Set a width for the `div`, then use `margin: 0 auto;`: http://jsfiddle.net/spikey/FLL5Z/ — uSeRnAmEhAhAhAhAhA, Mar 08 '14 at 19:53
PLease note, the margin: 0 auto; solution only works when the top and bottom borders need to be 0. If they need to be changed, then the full version of this is, margin: 0 auto 0 auto; with the first "0" being top and second "0" being bottom. This can also be writen as margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto. — Sam Denton, Jun 23 '14 at 12:50
easy way you can center anything is with flexbox as well. for x axis just set justify-content: center and for y axis you can set align-items: center;. to make a div completly in the middle center, use both! (for Parent element) — Appy Sharma, Jul 12 '19 at 17:52

score 56 · Accepted Answer · edited Aug 04 '16 at 14:23

56

<!DOCTYPE html>
<html>
  <head>
    <title>Center</title>
  </head>
  <body>

    <div style="text-align: center;">
      <div style="width: 500px; margin: 0 auto; background: #000; color: #fff;">This DIV is centered</div>
    </div>

  </body>
</html>

Tested and worked in IE, Firefox, Chrome, Safari and Opera. I did not test IE6. The outer text-align is needed for IE. Other browsers (and IE9?) will work when you give the DIV margin (left and right) value of auto. Margin "0 auto" is a shorthand for margin "0 auto 0 auto" (top right bottom left).

Note: the text is also centered inside the inner DIV, if you want it to remain on the left side just specify text-align: left; for the inner DIV.

Edit: IE 6, 7, 8 and 9 running on the Standards Mode will work with margins set to auto.

edited Aug 04 '16 at 14:23

Al Foиce ѫ

4,015
11
37
46

answered Apr 22 '10 at 13:28

Tower

93,713
124
340
500

i need to set with of my div percentage not fixed pixel , i think if if i set width to 95% , it wouldnt be center – Mac Taylor Apr 22 '10 at 13:35
how do you know his div is in position relative or static ? – meo Apr 22 '10 at 13:36
2

@Mac: this technique works just fine for a percentage width. However in general for auto-margin to work you must be in Standards Mode, for which you will need an appropriate ` declaration. The parent-text-align-center workaround will work for Quirks Mode, but you absolutely don't want to be writing anything in Quirks Mode today. – bobince Apr 22 '10 at 13:37
hmm , it worked only in FF not in IE ( any version ) pof hate this stupid IE – Mac Taylor Apr 22 '10 at 13:39
Try putting text-align: center; for IE. – Tower Apr 22 '10 at 13:44
u know text-align center text ,anyway i tried it but not worked – Mac Taylor Apr 22 '10 at 13:49
2

you need to wrap your div with another div, and set the outer div's style to be text-align for IE – erik Apr 22 '10 at 13:52
2

Just writing a solution does not help people learn. You should try to teach rather then just get rid of people quickly. – thecoshman Apr 22 '10 at 13:58
1

Re: "The outer text-align is needed for IE." — For IE 5.5 and earlier! Support for auto margins was added in IE6 standards mode! – Quentin Apr 22 '10 at 14:33
3

@thecoshman: Classes and books are for teaching. Stack Overflow is for answers. – nickf Apr 22 '10 at 14:39

thecoshman · Answer 2 · 2010-04-22T13:57:40.387

12

I think that the the align="center" aligns the content, so if you wanted to use that method, you would need to use it in a 'wraper' div - a div that just wraps the rest.

text-align is doing a similar sort of thing.

left:50% is ignored unless you set the div's position to be something like relative or absolute.

The generally accepted methods is to use the following properties

width:500px; // this can be what ever unit you want, you just have to define it
margin-left:auto;
margin-right:auto;

the margins being auto means they grow/shrink to match the browser window (or parent div)

UPDATE

Thanks to Meo for poiting this out, if you wanted to you could save time and use the short hand propery for the margin.

margin:0 auto;

this defines the top and bottom as 0 (as it is zero it does not matter about lack of units) and the left and right get defined as 'auto' You can then, if you wan't override say the top margin as you would with any other CSS rules.

edited Apr 22 '10 at 13:57

answered Apr 22 '10 at 13:32

thecoshman

8,148
7
53
77

you could use inline styles for margin.. margin: 0 auto; – meo Apr 22 '10 at 13:35
problem is IE that can not show div exactly centered ; i tried margin-left-right : auto but not worked on IE – Mac Taylor Apr 22 '10 at 13:51
@meo A fair point. Usually it would be best to take your advice as it helps reduce the file size, not much I know, but every little helps. Though for the guide, it helps explain the 'required' properties to get it to work. – thecoshman Apr 22 '10 at 13:53
1

@Mac Taylor - That might have something to do with the fact that there is no 'margin-left-right' property. You have to define the left, then the right or do it like meo suggests. – thecoshman Apr 22 '10 at 13:54
i just tried to type fast and i know there is no such a property ! uh – Mac Taylor Apr 22 '10 at 14:00
@Mac From experience, I can assure you that margin:auto works perfectly in IE6+. However... IE ignores it if you haven't correctly configured the doctype for the HTML page. It might also be a problem with how the container is defined. – salgiza Apr 22 '10 at 14:37

score 1 · Answer 3 · edited Jan 15 '21 at 03:12

it depends if your div is in position: absolute / fixed or relative / static

for position: absolute & fixed

<div style="position: absolute; /*or fixed*/;
width: 50%;
height: 300px;
left: 50%;
top:100px;
margin: 0 0 0 -25%">blblablbalba</div>

The trick here is to have a negative margin half the width of the object

for position: relative & static

<div style="position: relative; /*or static*/;
width: 50%;
height: 300px;
margin: 0 auto">blblablbalba</div>

for both techniques, it is imperative to set the width.

score -1 · Answer 4 · answered Apr 22 '10 at 13:29

-1

how about something along these lines

<style type="text/css">
  #container {
    margin: 0 auto;
    text-align: center; /* for IE */
  }

  #yourdiv {
    width: 400px;
    border: 1px solid #000;
  }
</style>

....

<div id="container">
  <div id="yourdiv">
    weee
  </div>
</div>

answered Apr 22 '10 at 13:29

erik

3,870
6
31
60

2

This won't work on other browsers or in Standards Mode, since the auto margins would need to be on the same element as the width. – bobince Apr 22 '10 at 13:39
it works fine for me in modes other than Quirks, i don't understand the constant down-voting – erik Apr 22 '10 at 14:04

How to make a div center align in HTML

4 Answers4

Linked