How to center a DIV with CSS?

Question

I want to know how to center a div with CSS. I googled some stuff & checked on stackoverflow but it was conflicting with my CSS code.

Here's my code (just in case):

body, p, span, div  {
    font-family: 'Droid Sans', arial, serif;
    font-size:12px;
    line-height:18px;
    color:#6d6d6d; } 
.countdown { 
    padding-top:15px; width: 100%;
    height: 68px;
    margin:0 auto 0 auto;
    bottom:0;
    position:absolute;
}
.countdown .countdown_section{
    background:url('images/backcountdown.png') no-repeat 1px top;
    float:left;
    height:100%;
    width:54px;
    margin:0 5px;
    text-align:center;
    line-height:6px;
}
.countdown .countdown_amount { 
    font-size:15px;
    color:#ab7100; 
    text-shadow:0 0.8px #fedd98; 
    line-height:52px; 
    font-weight:bold; 
    text-align: left; 
}
.countdown span { 
    font-size:8px;
    color:#999999;
    text-transform:uppercase;
    line-height:26px; 
}

<body>
<div class="countdown clearfix">       
</div>
</body>

What did you find? Conflicting how? Your CSS is a pain to read too. — BoltClock, Dec 22 '11 at 20:38
can you provide us with the HTML in question, there are some fairly common ways to center a div, but what are we centering it in? are you supporting versions of IE prior to 9? — PseudoNinja, Dec 22 '11 at 20:40
Next time I'll write all the codes vertically instead of horizontally :P. — Netizen110, Dec 22 '11 at 20:40

score 8 · Answer 1 · answered Dec 22 '11 at 20:38

8

The following automatically centers the element horizontally:

margin: 0 auto;

answered Dec 22 '11 at 20:38

Dennis Traub

50,557
7
93
108

What I want to center is .countdown which already has margin:0 auto 0 auto. & If I have kept it like that to have a sticky footer. Is there any otherways ? – Netizen110 Dec 22 '11 at 20:42
You've specified `width: 100%` for `.countdown`, so the div will use the whole width, how should it be centered then? Or do you want to center the text inside? – Yogu Dec 22 '11 at 20:44
3

The width must be less than the parent container's width. If it is set to 100% then it can't be centered. – Dennis Traub Dec 22 '11 at 20:49
1

I think this should have been marked as the correct answer, as this answers the question of the OP (he asked how to center "a div" - he didn't say he had trouble because of the width nor did he specify a specific div. Also, this post was a *bit* earlier (well.. 1 minute) – Robbietjuh Aug 09 '12 at 05:10

score 3 · Answer 2 · answered Sep 29 '12 at 20:34

3

Provided fixed width is set, and you put a proper DOCTYPE,

Do this:

 Margin-left: auto;
 Margin-right: auto;

Hope this helps

answered Sep 29 '12 at 20:34

score 3 · Accepted Answer · answered Dec 22 '11 at 20:39

3

You can center a div with a specific width using the following css:

#yourDiv {
    width: 400px;
    margin: 0 auto;
}

answered Dec 22 '11 at 20:39

Yogu

9,165
5
37
58

score 2 · Answer 4 · answered Dec 22 '11 at 20:38

2

To center a div use:

#content{
    margin: 0 auto;
}

<div id="content">This will be centered horizontally</div>

answered Dec 22 '11 at 20:38

Gabe

49,577
28
142
181

score 2 · Answer 5 · answered Dec 22 '11 at 20:39

2

<div style="margin:auto; width: 100px;">lorem</div>

answered Dec 22 '11 at 20:39

sunkencity

3,482
1
22
19

Aaron · Answer 6 · 2011-12-22T20:47:17.837

2

The above answers will work for divs with relative or static positioning. For absolutely positioned elements (like your .countdown element, you'll need to set left: 50% and margin-left: -XXXpx where XXX represents half of the div's width (including padding and border).

(example: http://jsfiddle.net/7dhwG/)

edited Dec 22 '11 at 20:47

answered Dec 22 '11 at 20:42

Aaron

5,137
1
18
20

Tried it but got a horizontal scrollbar. Still np, Thanks a lot !. – Netizen110 Dec 22 '11 at 20:44
You'll need to specify an explicit width in pixels for `.countdown` of something less than 100% of its parent's width. – Aaron Dec 22 '11 at 20:49

score 2 · Answer 7 · answered Dec 22 '11 at 20:50

2

This will center your page it works great.

  #yourdiv {
  width: width you want px;
  margin: 0 auto;
     }

answered Dec 22 '11 at 20:50

Jose Ortiz

705
1
9
19

score 0 · Answer 8 · answered Aug 09 '12 at 05:06

0

You can also center an absolute position div by setting left to 50% and margin-left to -half of the full width in px.

div {
 position: absolute;
 width: 500px;
 left: 50%;
 margin-left: -251px;
}

answered Aug 09 '12 at 05:06

Michael Ray-Von

125
2
9

score 0 · Answer 9 · edited May 23 '17 at 12:17

0

Stop using margin: 0 auto, Cross browser way of doing this is Here I have tested it and it works perfectly on all browsers

edited May 23 '17 at 12:17

Community

1
1

answered Apr 20 '17 at 02:42

amachree tamunoemi

817
2
16
33

How to center a DIV with CSS?

9 Answers9