height 100%

Koden virker fint i Opera.. Husk også "padding:0px;".. ("px" kan undlades hvis værdien er "0", men jeg foretrækker altid at tilføje "px")

Hvilken browser tester du med?

Jeg har lige testet med Internet Explorer 6 SP2 og Mozilla FireFox v2.0.0.12.. begge ser korrekt ud..

I FireFox er teksten "asdf" dog lidt "på vej ud" i venstre side af skærmen, pga "margin:0"..

jeg tester med både IE6 og FF2

er hele dit skræmbillede rødt?

argh...

fordi jeg havde et form-tag omkring mit div-tag :P

smid et svar

men

jeg synes ikke jeg kan få vertical-align til at virke?

<div style="height:100%; width:100%; text-align:center; vertical-align:middle; background:#ff0000">
asdf
</div>

jeg vil også mene koden er korrekt.
div'ens parent (body) har 100% højde og bredte hvilket gør din div burde få det samme.

måske er der andre tags i din kode end det vi ser?
f.eks i .NET smider den <form runat="server">

ind efter body.. den kan du tilgengæld også bare give 100% og bredte .. så vil det fungerer.

Hmm.. jeg tror at vertical-align kun virker på billeder og celler i tabeller.. selvom der står:

"The vertical-align property specifies the vertical alignment of an inline or table-cell element."
http://developer.mozilla.org/en/docs/CSS:vertical-align

Jeg kunne ikke finde noget specifikt på W3C..

<ole>

- ikke helt. Vertical-align virker helt specielt på tabelceller - i forhold til alle andre elementer.

På en tabelcelle bestemmer vertical-align, hvordan indholdet skal vertikalt placeres i cellen.

På alle andre inline-elementer bestemmer vertical-align, hvordan elementet skal placere sig i forhold til andet inline-indhold i det omkransende element.

Tydeliggjort eksempel på de tilgængelige værdier:

<p style="font:bold 72px tahoma,sans-serif;border:1px solid red">
    <span>BlaBla - none</span> <input type="text"></p>

<p style="font:bold 72px tahoma,sans-serif;border:1px solid red">
    <span>BlaBla - top</span> <input style="vertical-align:top" type="text"></p>


<p style="font:bold 72px tahoma,sans-serif;border:1px solid red">
    <span>BlaBla - middle</span> <input style="vertical-align:middle" type="text"></p>


<p style="font:bold 72px tahoma,sans-serif;border:1px solid red">
    <span>BlaBla - baseline</span> <input style="vertical-align:baseline" type="text"></p>

<p style="font:bold 72px tahoma,sans-serif;border:1px solid red">
    <span>BlaBla - bottom</span> <input style="vertical-align:bottom" type="text"></p>

<p style="font:bold 72px tahoma,sans-serif;border:1px solid red">
    <span>BlaBla - text-top</span> <input style="vertical-align:text-top" type="text"></p>

<p style="font:bold 72px tahoma,sans-serif;border:1px solid red">
    <span>BlaBla - text-bottom</span> <input style="vertical-align:text-bottom" type="text"></p>

<p style="font:bold 72px tahoma,sans-serif;border:1px solid red">
    <span>BlaBla - sub</span> <input style="vertical-align:sub" type="text"></p>

<p style="font:bold 72px tahoma,sans-serif;border:1px solid red">
    <span>BlaBla - super</span> <input style="vertical-align:super" type="text"></p>

/mvh
</bole>

Nu ved jeg ikke hvilke(t) element, som du vil have centreret og hvor:

<style>
body {margin:0px;}
#center {position:absolute;top:50%;left:50%;background:red;width:200px;height:100px;margin-left:-100;margin-top:-50px;}
</style>
<div id='center'>center</div>

Så vidt jeg kan huske:
Hvis man bruger "position:absolute;top:50%;left:50%;", skal man samtidigt bruge:

margin-left:MINUS_HALVDELEN_AF_BREDDEN_PÅ_BOKSEN_DER_SKAL_CENTRERESpx;
margin-top:MINUS_HALVDELEN_AF_HØJDEN_PÅ_BOKSEN_DER_SKAL_CENTRERESpx;

Og jeg tror at det er det hmm10 har gjort, men har glemt at sige det.. :-)

- præcis, men problemet er som oftest, at elementet, der skal vertikalt centreres, har dynamisk indhold og dermed ukendt højde. Kender man højden, kan man sagtens placere elementet lodret centreret  :)

Og så er det her at JavaScript kommer ind i billedet.. :-)

lukker