css|網頁
若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來調整。
