<!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>
1 回答
已采纳
KevenHuang
TA贡献280条经验 获得超233个赞
我有四种方法：
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
来源：慕课网
- 1 回答
- 0 关注
- 2604 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消