Vertically aligning a div inside another div

[Redgie]

Hi there, from googling round this seems like an age old problem best solved by using tables, but in fear of missing something obvious I felt I should post here!

I'm trying to align a div in the exact centre of another div, both vertically and horizontally, I've achieved this horizontally but can't seem to get it to work vertically.

The CSS of the parent div is:

.contentbox
{
	background-image:url('/images/ContentBoxV1.jpg');
	height:200px;
	width:1024px;
}

While the CSS of the inner div is:

.innercontentbox
{
	background-image:url('/images/InnerContentBoxV2.jpg');
	height:170px;
	width:300px;
	margin-left:auto;
	margin-right:auto;
}

The live site is www.cypherhosting.co.uk , the relevant element is the not-so-centrally-aligned content box inside the bigger content box under the menu buttons.

Thanks guys!

 

[Redgie]

Add margin-top:15px to the .innercontentbox styling.
Only problem is that it won't stay centered if the box grows.

I've been looking for a solution for a very similar problem I was having, but like you, I only found solutions involving table-cells

Unfortunately that pushes the parent div up with it, which is not what I'm going for

 

[Redgie]

That somewhat worked, but meant that it took away the previously working horizontal centering and means that when the page expands vertically the elements move out of the center.

 

[Redgie]

Because the box needs to appear in the centre of the box it is in, or it will look graphically wrong (As it currently does).

 

[Redgie]

That was just done for simplicity, it's only a concept site at the mo

If I push it down by 15px it still has the same problem, by saying that I'm trying to center it, I don't mean center it via centering code, I mean center it by dropping it down by 15px without pushing anything else away, which margins and padding both do.

 

[Redgie]

To be honest, I have no idea what you're trying to achieve here. Do you have a design mockup of what the site's supposed to look like when finished?

Not really, or not one outside of my head anyway

The box is aligned centrally now (Thanks guys ) but because of the use of relative and absolute positioning, adding them side by side doesn't work particularly well, I'd rather do it without any form of positioning, and so see the use of tables as perhaps my only option

 

[Redgie]

display: block;
margin-left: auto;
margin-right:auto;
position: relative;
top: Xpx;

Does that help at all?

Thank you, this did it Along with the width and height declarations (Otherwise it didn't quite fit).

Thank you very much, and to everybody else who helped!