亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

怎樣讓內容居中在瀏覽器屏幕中間？使用定位后這個內容就不見了

怎樣讓內容居中在瀏覽器屏幕中間？使用定位后這個內容就不見了

江南京華夢3822496 2017-02-16 22:32:57
<!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.xianlaiwan.cn/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.xianlaiwan.cn/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.xianlaiwan.cn/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.xianlaiwan.cn/article/16397
來源：慕課網


查看完整回答
3 反對 回復 2017-02-16
  • 江南京華夢3822496
    江南京華夢3822496
    太感謝了，但是我有些不明白絕對定位absolute 不是都和相對定位relative 同時出現的嗎？如果給了body瀏覽器屏幕一個相對定位就會出錯？什么時候可以單獨使用？
  • 1 回答
  • 0 關注
  • 2655 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號