若BOX的宽度和高度已知：
<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来调整。
欢迎大家阅读《网页制作之CSS的垂直居中实现_css》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码
转载请注明原文链接：网页制作之CSS的垂直居中实现_css
