<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*一、未知宽度水平居中*/
*{margin:0; padding:0;}
body,html{overflow:hidden; height:100%;}
.box {height: 100%; overflow: hidden; position: relative; width: 100%; display: table;}
.middle {top:50%;text-align:center;display: table-cell; vertical-align: middle; *position:absolute; *left:50%;}
.content{border:#09F solid 1px; margin:0 auto; position:relative; top:-50%;font:12px/2 "Microsoft YaHei"; padding:0 10px; display:table; *left:-50%;}
/*二、未知宽高div 水平垂直居中*/
*{margin:0; padding:0;}
body,html{overflow:hidden; height:100%;}
.box {height: 100%; overflow: hidden; position: relative; width: 100%; display: table;}
.middle {top:50%;text-align:center;display: table-cell; vertical-align: middle; *position:absolute; *left:50%;}
.content{border:#09F solid 1px; margin:0 auto; position:relative; top:-50%;font:12px/2 "Microsoft YaHei"; padding:0 10px; display:table; *left:-50%;}
/*三、已知宽高div 水平垂直居中*/
html,body { margin:0; padding:0; height:100%; font:12px/180% "宋体"; text-align:center;}
#main {
width:200px;
height:20px;
background-color:#ddd;
position:relative;
top:50%;
margin:-10px auto 0 auto;
/* margin-top=-(height/2); */
}
</style>
</head>
<!--一、未知宽度水平居中-->
<body>
<div class="box">
<div class="middle">
<div class="content">未知宽高div在页面内水平垂直居中</div>
</div>
</div>
<!--二、未知宽高div 水平垂直居中-->
<div class="box">
<div class="middle">
<div class="content">未知宽高div在页面内水平垂直居中</div>
</div>
</div>
<!--三、已知宽高div 水平垂直居中-->
<div id="main">
传说中的水平及垂直居中
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*一、未知宽度水平居中*/
*{margin:0; padding:0;}
body,html{overflow:hidden; height:100%;}
.box {height: 100%; overflow: hidden; position: relative; width: 100%; display: table;}
.middle {top:50%;text-align:center;display: table-cell; vertical-align: middle; *position:absolute; *left:50%;}
.content{border:#09F solid 1px; margin:0 auto; position:relative; top:-50%;font:12px/2 "Microsoft YaHei"; padding:0 10px; display:table; *left:-50%;}
/*二、未知宽高div 水平垂直居中*/
*{margin:0; padding:0;}
body,html{overflow:hidden; height:100%;}
.box {height: 100%; overflow: hidden; position: relative; width: 100%; display: table;}
.middle {top:50%;text-align:center;display: table-cell; vertical-align: middle; *position:absolute; *left:50%;}
.content{border:#09F solid 1px; margin:0 auto; position:relative; top:-50%;font:12px/2 "Microsoft YaHei"; padding:0 10px; display:table; *left:-50%;}
/*三、已知宽高div 水平垂直居中*/
html,body { margin:0; padding:0; height:100%; font:12px/180% "宋体"; text-align:center;}
#main {
width:200px;
height:20px;
background-color:#ddd;
position:relative;
top:50%;
margin:-10px auto 0 auto;
/* margin-top=-(height/2); */
}
</style>
</head>
<!--一、未知宽度水平居中-->
<body>
<div class="box">
<div class="middle">
<div class="content">未知宽高div在页面内水平垂直居中</div>
</div>
</div>
<!--二、未知宽高div 水平垂直居中-->
<div class="box">
<div class="middle">
<div class="content">未知宽高div在页面内水平垂直居中</div>
</div>
</div>
<!--三、已知宽高div 水平垂直居中-->
<div id="main">
传说中的水平及垂直居中
</div>
</body>
</html>