Best way of Vertical centering a div?

~~Moh~~ · 25-10-2008, 12:56 PM

What's the best way to vertical center a div?

+rep

Heroix · 25-10-2008, 01:01 PM

I am learning to code, but could you do in the css. margin-top: 25%; or 50% or something. LOL im probs wrong !

Jxhn · 25-10-2008, 02:14 PM

I've heard people say:

Code:

margin: auto;

but I've not tryed that yet. I know this works:

Code:

position: absolute;
top: 50%;
margin top: -[half div's height]px;

CSS obviously.

~~Moh~~ · 25-10-2008, 02:18 PM

Originally Posted by Jxhn

I've heard people say:

Code:

margin: auto;

but I've not tryed that yet. I know this works:

Code:

position: absolute;
top: 50%;
margin top: -[half div's height]px;

CSS obviously.

What if the height is expandable - sorry, forgot to state that.

Favourtism · 25-10-2008, 02:22 PM

When I asked before for alligning divs in a skin I got told to use

v-align: center;

Jxhn · 25-10-2008, 02:34 PM

Originally Posted by Jack120

What if the height is expandable - sorry, forgot to state that.

Then try the margin: auto; thing. If that doesn't work then you might need javascript to find the height of the element. I'm pretty sure It must be possible without javascript though.

Originally Posted by Favourtism

When I asked before for alligning divs in a skin I got told to use

v-align: center;

Thats an old html tag and can be done with css. I think you meant valign="middle". When I was looking for information about that I found a possible solution for Jack's problem.

Code:

div.blah
{
vertical-align: middle;
}

craigg. · 25-10-2008, 02:55 PM

use margin: auto; on the container div or even in the body tag.

~~Jackboy~~ · 25-10-2008, 07:24 PM

i swear theres vertical-align: in css

HabbDance · 25-10-2008, 08:31 PM

i think they are right.

Code:

#div {
margin: auto;

should work.

but, you can try this:

Code:

<div style="background-image: url( '<your-full-image>.png' ); background-position: 50% center; background-repeat: no-repeat; width: <your-images-width>px; height: <your-images-width>px; position: absolute; top: 50%; left: 50%; margin-left: -( <your-images-width> / 2 )px; margin-top: -( <your-images-height> / 2 )px;"></div>

Iszak · 25-10-2008, 09:00 PM

Jxhn is right to an extent in using vertical align, but for it to work you must set the parent/containing div to be display: table-cell; here is an example.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">
#container
{
  width: 500px;
  height: 500px;
  display: table-cell;
  vertical-align: middle;
  background-color: #333;
}

#middle
{
  width: 500px;
  background-color: #999;
}
</style>

</head>
<body>

<div id="container">
  <div id="middle">
    Expands yay :)<br />
    <br />
    <br />
    <br />
    and yet still centered :P:
  </div>
</div>

</body>
</html>

Now if you want something centered vertically in the body now that's a different story.

I might also add on Jxhn first post about the position: absolute; left: 50%; margin-left: -(width/2)px of course you don't do it like that you do the calculations this has one slight problem - you've got to set the parent to position: relative; otherwise it'll fail.

Thread: Best way of Vertical centering a div?

Thread Tools

Best way of Vertical centering a div?

Posting Permissions