CODEWITHSUNDEEP
htmlcss
whatyouhide
whatyouhide

Reputation: 16781

Center elements in a web page - margin 0 auto or left 50%?

In order to center elements inside a parent container using CSS, I always did this:

div.element-to-center { width: ...; margin: 0 auto; }

but I've always had the feeling that this is not the right way to do it; I'm not too much confident with margins in general.

I know you could go with position: fixed; and left:50%; top:50%; and then do your calculations with margins in order to position the element in the exact center... But is it a valuable choice?

My question is: is margin: 0 auto; a good technique to center elements on a page? Can I do better in other ways?

Upvotes: 3

Views: 3735

Answers (3)

Andrea Ligios
Andrea Ligios

Reputation: 50271

Yes, margin: 0 auto; is a good technique.

Left: 50% needs a non-static position, and it does not center, because it starts your div from 50% of the total width, without considering the lenght of the div itself.

To use Left correctly you should (know and) subtract half of the width of your div to the value, with CSS3 Calc:

Demo: http://jsfiddle.net/r7EwW/

HTML 

<div class="auto">Div with margin: 0 auto;</div>
<div class="percentage">Div with Left: 50%;</div>
<div class="percentageDynamic">Div with Left: (50% - half of div's width) </div>

CSS

div.auto {
    width: 100px;
    border: 1px solid green;
    margin: 0 auto;    
}

div.percentage {
    width: 100px;
    border: 1px solid red;
    position: relative;
    left: 50%;    
}


div.percentageDynamic {
    width: 100px;
    border: 1px solid green;
    position: relative;
    left: calc(50% - 50px);    
}

Upvotes: 3

Andrew Morris
Andrew Morris

Reputation: 1652

It will depend on the scenario you want to implement. Personally I would/have always used the width:960px; margin:0 auto; for the container body (if that was your question).

If you want to embed divs within your main container you have to think about what you know it will contain. If you can guarantee what size the contents will be then you can use the width/margin method, but I find there are times I don't always know what size I want to restrict containers to, in which case I simply set the width:100%; margin:0 1em; to give me a margin on each side of my container.

One method I have used recently which I used when making a fantasy football squad layout, where multiple items are all centrally aligned is the following:

HTML

<div class="squad">
    <div>GK</div>
    <br/>
    <div>DF</div>
    <div>DF</div>
    <div>DF</div>
    <div>DF</div>
    <br/>
    <div>MF</div>
    <div>MF</div>
    <div>MF</div>
    <br/>
    <div>ST</div>
    <div>ST</div>
    <div>ST</div>
</div>

CSS

.squad {
    width: 320px;
    font-size:0;
    text-align: center;
}

.squad div {
    font-size: 16px;
    display: inline-block;
    width: 40px;
    background-color:red;
    margin:1px 5px;
    text-align:center;
}

Personally I normally stay away from position:fixed/absolute because they're more likely to conflict with styling in other ways/places.

I think the answer is that it really depends on what your scenario is, what content you intend to put in it and how much you know about that content.

Upvotes: 0

miszczu
miszczu

Reputation: 1189

I'm doign margin: 0 auto and this is correct, margin: 50% isn't too good.

Also you can try something like that, its also correct:

<center>
    <div style="width: 1200px; text-align: left;">
    </div>
</center>

Upvotes: 0

Related Questions