Method 1:
<Style type = "text/CSS">
<! --
* {Margin: 0; padding: 0}
Div {
Width: 500px;
Height: 500px;
Border: 1px solid #666;
Overflow: hidden;
Position: relative;
Display: Table-cell;
Text-align: center;
Vertical-align: Middle
}
Div P {
Position: static;
+ Position: absolute;
Maximum: 50%
}
IMG {
Position: static;
+ Position: relative;
Top:-50%; left:-50%;
}
-->
</Style>
<Div> <p> </P> </div>
Method 2:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> vertical center of images in a div </title>
<Style type = "text/CSS">
<! --
Body {
Margin: 0; padding: 0
}
Div {
Width: 500px;
Height: 500px;
Line-Height: 500px;
Border: 1px solid #666;
Overflow: hidden;
Position: relative;
Text-align: center;
}
Div P {
Position: static;
+ Position: absolute;
Maximum: 50%
}
IMG {
Position: static;
+ Position: relative;
Top:-50%; left:-50%;
Vertical-align: Middle
}
P: After {
Content: "."; font-size: 1px;
Visibility: hidden
}
-->
</Style>
</Head>
<Body>
<Div> <p> </P> </div>
</Body>
</Html>
Method 3:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> vertical center of images in a div </title>
<Style type = "text/CSS">
<! --
* {Margin: 0; padding: 0}
Div {
Width: 500px;
Height: 500px;
Line-Height: 500px;
Border: 1px solid #666;
Overflow: hidden;
Position: relative;
Text-align: center;
}
Div P {
Position: static;
+ Position: absolute;
Top: 50%;
Vertical-align: Middle
}
IMG {
Position: static;
+ Position: relative;
Top:-50%; left:-50%;
Vertical-align: Middle
}
-->
</Style>
</Head>
<Body>
<Div> <p> </P> </div>
</Body>
</Html>
Method 4 (centered on the background image ):
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> vertical center of images in a div </title>
<Style type = "text/CSS">
<! --
* {Margin: 0; padding: 0 ;}
Div {
Width: 500px; Border: 1px solid #666;
Height: 500px;
Background: URL ("http://www.google.com/intl/en/images/logo.gif") center no-repeat
}
-->
</Style>
</Head>
<Body>
<Div> </div>
</Body>
</Html>