3

I am trying to centre, just using css, a div element both vertically and horizontally.

All the examples I have seen makes use of hardcoded values like pixel values.

Should it be possible to centre a div element without using javascript and using just percentage values?

Here is my test: jsfiddle.net

Lorraine Bernard
  • 13,000
  • 23
  • 82
  • 134

2 Answers2

2

You need to know the size of the div. (Yes, the div must have a size FIXED). 

div { 
    width: 50px; 
    height: 50px; 
}

His div must have absolute position: 

div { 
    position: absolute; 
    width: 50px; 
    height: 50px; 
}

After, you must enclose the top and left at 50%; 

div { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    width: 50px; 
    height: 50px; 
}

Finally, you must add a negative margin for both top and left referring to half the value of the height and width of your div. 

div { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    width: 50px; 
    height: 50px; 
    margin:-25px 0 0 -25px; 
}

Please test.
Any questions let me know.

Patrick Maciel
  • 4,874
  • 8
  • 40
  • 80
  • +1 Thanks for your answer. For the vertical alignement I don't need to know the size of the div. Said that I suppose it should be the same for the horizontal alignement. – antonjs Aug 06 '12 at 13:49
1

This can actually be done with the use of the :before selector (questionable browser compability, but it can be done).

Check out this great article by Chris Coyier on the subject to learn all about it, he also supplies you with a jsfiddle link to try it out.

aivou
  • 126
  • 1
  • 4
  • +1 thanks for your response. Actually the example is regarding how to centre a text and not a div. here is the jsfiddle example http://jsfiddle.net/wFPhW/. Please correct me if I am wrong. – Lorraine Bernard Aug 06 '12 at 14:27
  • Taking another look at the example you'll notice that it's also centering the entire `div` container, the text alignment (if an issue) can be solved by by applying another `text-align:left` on the inner (.centered) element. But I can totally see why one would assume that he's just centering the text, as that's what the CSS at a quick glance basically says. But don't be fooled, it's a trick that's used in this scenario to allow you to horizontally center any element. – aivou Aug 06 '12 at 14:32
  • Anyway, in the example you posted you need to know the width of the centred div otherwise it does not work. – Lorraine Bernard Aug 06 '12 at 14:52
  • That's not true, actually it's not dependent on any defined width. Try setting the width parameter for .centered to auto or nothing at all and you'll be surprised at how well this piece of CSS adapts. But as stated earlier, it's not a viable solution either way, since it's not fully supported across browsers. – aivou Aug 06 '12 at 14:57
  • Dear @aivou if you are sure that it does not depend on any defined width or height please post a jsfillde link. This one as you can see http://jsfiddle.net/chriscoyier/hJtpF/ has the height hardcoded in html part! `style="height: 300px;"` try to delete this part and see what happens. – js999 Aug 06 '12 at 16:35
  • Hey @js999, I've modified the jsfiddle a bit to showcase this. Note that as the parent element will have no set height in this example it will simply (yet, mind you, only visually) align itself horizontally. Obviously it cannot align itself to any outside grandparent - that would be absurd - and thus you're left with the fact that, yes, it has to be placed within a parent element that has height (not necessarily a hard coded number; be it percent, inherited or what not) that exceeds that of its own in order to visually align itself in its center. Link: http://jsfiddle.net/Ak7Uq/1/ – aivou Aug 06 '12 at 19:25
  • @aivou your last example seems better, thanks. But, if I put into the block the height in pixel unit it work, If I put into the block the height in percentage unit it does not. – Lorraine Bernard Aug 07 '12 at 09:42
  • @LorraineBernard Ah, I see why, it's due to how jsfiddle implements the html; Adding height to its parent (the body element) will fix the percentage issue for .block. This would however not often be necessary in a real scenario where a height would most likely always be supplied on some shape or form for the parent element. Example: http://jsfiddle.net/Ak7Uq/2/ - So while I did say that **it** does not require any height or width itself, it's still important that there is height around in the parent, or grandparent, in order for the % height to work for this solution. – aivou Aug 07 '12 at 09:55