|
Horizontal and Vertically Centred box model
This is the best and 100% cross platform horizontal and vertically centred box model I've found so far. Works with IE/WIN, FIREFOX/WIN, IE/MAC, FIREFOX/MAC, SAFARI/MAC... It even works on IE/Mac Classic (Mac OS 9).
-- START --
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS - Vertically Centered Box</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
body {
margin:0px;
}
#outerContainer {
position:relative;
height:50%;
border:solid #F00 1px;
}
#theBox {
position:absolute;
left:50%;
bottom:-25px;
width:100px;
height:50px;
border:solid #000 1px;
margin-left:-50px;
}
</style>
</head>
<body>
<div id="outerContainer">
<div id="theBox"></div>
</div>
</body>
</html>
-- END --
|