One, unknown width horizontal Center
| The code is as follows |
Copy Code |
| <!doctype html>
<meta charset= "Utf-8" >
<title> unknown wide high div is centered horizontally vertically in the page </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%;}
</style>
<body>
<div class= "box" >
<div class= "Middle" >
<div class= "Content" > Unknown wide high div is centered horizontally vertically in the page </div>
</div>
</div>
</body>
|
Second, unknown wide high div horizontal vertical Center
| The code is as follows |
Copy Code |
| <!doctype html>
<meta charset= "Utf-8" >
<title> unknown wide high div is centered horizontally vertically in the page </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%;}
</style>
<body>
<div class= "box" >
<div class= "Middle" >
<div class= "Content" > Unknown wide high div is centered horizontally vertically in the page </div>
</div>
</div>
</body>
|
Three, known wide high div horizontal vertical Center
| code is as follows |
copy code |
| <meta http-equiv= "Content-type" content= "text/html" Charset=utf-8 "/>"
<title> Width-high fixed containers horizontally vertically in the browser </title>
<style> Html,body {margin:0 ; padding:0; height:100%; font:12px/180% "Song Body"; 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>
<body>
<div id= "main"
horizontal and vertical center in legend
</div>
</ Body>
|
