若BOX的宽度和高度已知:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title></title> <style type="text/css"> body{ font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0; padding: 0;/*--for opera--*/ }
#layout{ position: absolute;/*--绝对定位--*/ top: 50%; left: 50%; margin-top: -240px;/*--div高度的一半--*/ margin-left: -320px;/*--div宽度的一半--*/ width: 640px; height: 480px; background: #ECECEC; }
pre{ padding: 15px; } </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body> <div id="layout"><pre> body{ font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0; padding: 0;/*--for opera--*/ }
#layout{ position: absolute;/*--绝对定位--*/ top: 50%; left: 50%; margin-top: -240px;/*--div高度的一半--*/ margin-left: -320px;/*--div宽度的一半--*/ width: 640px; height: 480px; background: #ECECEC; }
pre{ padding: 15px; } </pre></div> </body> </html>
解释:如果把屏幕中点设为坐标原点(0 0),X的正方向是屏幕的右边,Y的正方向屏幕的上边。那么在已知BOX宽度和高度的情况下,设BOX的属性为绝对定位,top:50% left:50%,这样的话,BOX的左上角就在坐标原点(0 0), 设margin-left:-320px(宽度的一半), 左上角的坐标(-320 0),再设margin-top:-240px(高度的一半),左上角的坐标现在是(-320 240),相对原点来说, BOX是完全居中了,四个顶点的值分比别是(320 240)Ⅰ, (-320 240)Ⅱ,(-320 -240)Ⅲ ,(320 -240)Ⅳ。
适用于首页带语言选择版本或者欢迎页。
单行文字可采用行高来实现垂直居中,或者用padding来调整。 |