Center divs etc. horizontally with CSS

Question

How do you center a div or anything else horizontally, so that on both sides the empty spaces are equal? And the div is exactly in the middle? No matter the size of the objects.

Take for example: the Stackoverflow site itself. Except for the black header on the top of this site, everything is in the middle and the empty spaces on both sides are equal to each other.

I've searched for a long time, but I only encountered the wrong answers or vague answers.

Please help and thank you!

score 1 · Answer 1 · edited Aug 02 '14 at 18:47

1

In css, you can use margin: auto;

A common pattern is to wrap your content in a container with a fixed width and add margin: auto; to it.

edited Aug 02 '14 at 18:47

j08691

204,283
31
260
272

answered Aug 02 '14 at 18:44

Dane O'Connor

75,180
37
119
173

score 0 · Accepted Answer · answered Aug 02 '14 at 18:46

0

try this. here is why

margin: 0 auto;

answered Aug 02 '14 at 18:46

doniyor

36,596
57
175
260

score 0 · Answer 3 · answered Aug 02 '14 at 18:50

0

The common way is using margin:0px auto. Look at the following example.

HTML

<div id="wrapper">
  <div class="test">
     This is my content Div.
 </div>
</div>

CSS

.test
{    
 width:60%;
 border:1px solid #ccc;
 margin:0px auto;
}

DEMO

answered Aug 02 '14 at 18:50

Suresh Ponnukalai

13,820
5
34
54

Center divs etc. horizontally with CSS

3 Answers3