Centring content without specifying height or width

[catterfeld]

I've trawled through the archives but I've been unable to find an answer to what seems like should be a very common question.

I need to centre the content on my page both horizontally and vertically, but I do not want to have to specify the height and width of the <div>. I have used Pyro's example previously <http://www.infinitypages.com/research/verticalcentereddiv.htm>, but his example requires a predetermined height and width of the <div> which I don't have.

I want to centre three types of <div> with at most two style sheets. The first has a fixed width, with height dependant on the text content of the box. The second and third types are either height 420px and width 300px or height 300px and width 420px, but these must share the same style sheet.

Can anyone offer me advice on how I can get these divs to dynamically centre on the page without predetermined heights and widths?

Many thanks for your help,

Catto

[chris9902]

CSS

body{
text-align: center;
}

div#center{
margin: auto;
}

HTML

<div id="center">
ADD YOUR DIV's HERE
</div>

[catterfeld]

Thanks Chris, but I didn't seem to have any luck with that.

I created the CSS as


body {
text-align: center;
}

div#all {
margin: auto;
}

div#middlebit {
vertical-align: middle;
}


and the basic html as


<div id="all">
<div id="middlebit">Middle bits.</div>
</div>


but it didn't centre the 'all' div?!

[chris9902]

the ALL div is a container.

like when you make tables you have <table. then <tr> <td>

the div"ALL" tags acts like the <center> tags for div layouts

[catterfeld]

You're right that the 'all' <div> works like the <center> tag, but I also need the content to be vertically aligned to the middle. Any ideas?

Thanks a million,

Catto

[chris9902]

i don't think you can with div tags.

try a search for vertical-align div tags

[pyro]

If you don't specify a width, they will, by default, take up all available space, thus leaving nothing to center.

[MrPunkin]

Why dont you make a 1px tall DIV box that allows for content-overflow, set it 50% from the top, then just place all your content in that? It will overflow out of the box and *should* look as though its not even within that box, but will be vertically aligned.