怎样让内容居中在浏览器屏幕中间？使用定位后这个内容就不见了
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>全屏居中</title>
<style>
/*重置*/
body,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p,input,b{ margin:0; padding:0; font-family:"微软雅黑"; font-size:12px;}
body,html{ overflow:hidden; background:#E0E0E0;}
body{ position:relative;}
li{ list-style:none;}
a{ text-decoration:none;}
.clearfix:after{ content:"."; height:0; visibility:hidden; display:block; clear:both;}
/*主要内容*/
.contbox{ width:600px; height:500px; background:#fff; position:absolute; top:50%; left:50%; margin-top:-250px; margin-left:-300px;}
</style>
</head>
<body>
<div class="contbox">
<h1>该语种网站正在建设中</h1>
<h5>敬请期待...</h5>
</div>
</body>
</html>
江南京华梦3822496浏览 2606回答 1
1回答
-
KevenHuang
我有四种方法：1.<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>块元素绝对居中</title> <style> html,body,table{ margin:0; height:100%; } table{ width:100%; } #box{ width:300px; height:300px; background:teal; margin:auto; } </style> </head> <body> <table> <tr> <td> <div id="box"></div> </td> </tr> </table> </body> </html> 作者： KevenHuang 链接：http://www.imooc.com/article/16397 来源：慕课网2.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>块元素绝对居中</title> <style> *{ margin:0; } #box{ width:300px; height:300px; background:maroon; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } </style> </head> <body> <div id="box"></div> </body> </html> 作者： KevenHuang 链接：http://www.imooc.com/article/16397 来源：慕课网3.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>块元素绝对居中</title> <style> *{ margin:0; } #box{ width:300px; height:300px; background:silver; position:absolute; left:50%; top:50%; margin-left:-150px; margin-top:-150px; } </style> </head> <body> <div id="box"></div> </body> </html> 作者： KevenHuang 链接：http://www.imooc.com/article/16397 来源：慕课网4.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>块元素绝对居中</title> <style> *{ margin:0; } #box{ width:300px; height:300px; background:pink; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; } </style></head><body> <div id="box"></div></body></html> 作者： KevenHuang 链接：http://www.imooc.com/article/16397 来源：慕课网
随时随地看视频慕课网APP
Html/CSS