怎么让网页(body)内容显示在正中间(左右的中、上下的中）？

时间：2021-06-22 19:32:31
如题：就是让网页内的内容不靠上、不靠下、不靠左、不靠右， 显示在最中间？

17 个解决方案

#1

用CSS控制

#2

<body style="...">  

这样？

#3

用CSS控制，建議不要調整body，而是用div，再設div的id＝“#main_container”就可以了

#main_container{
width:760px;
height:auto;
margin:auto;
padding-top:10%;
}

#4

引用 3 楼 sito_hongta 的回复:
用CSS控制，建議不要調整body，而是用div，再設div的id＝“#main_container”就可以了

#main_container{
width:760px;
height:auto;
margin:auto;
padding-top:10%;
}


......我要的就是要body 内容都在中间啊，就是我随便改变窗口大小，内容始终在中间 就是要
center和middle 哦

#5

<body id="css">  
#css{ 
width:760px; 
height:auto; 
margin:auto; 
padding-top:10%; 
}

#6

肯定需要自己写js了。你上网搜一下吧

#7

引用 5 楼 fengqiao1999 的回复:
<body id="css"> 
#css{
width:760px;
height:auto;
margin:auto;
padding-top:10%;
}


还是达不到 上下 middle 的效果 哦 ， 内容不在最中间

#8

我要的效果：

我任意调整窗口大小，内容始终在最中间 就是要 center and middle .

#9







怎么让网页(body)内容显示在正中间(左右的中、上下的中）？

#10

别晕丫，指点下额。

#11

来人丫

#12

svrmgrl connectinternal startup exit

#13

ding

#14

使用2个div来完成  楼主是否是想在不同分辨率下  页面内容都居中？

#15

引用 14 楼 lost11211333 的回复:
使用2个div来完成  楼主是否是想在不同分辨率下  页面内容都居中？


是丫， 2 个 div 怎么弄？

#16

顶

#17

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>  
body,html{margin:auto;height:100%;}
#outer{width:100%; height:100%;position:relative;}
#outer[id]{display:table;}
#middle{position:absolute;top:50%;}
#middle[id]{display:table-cell; position:static;vertical-align:middle}
#inner{position:relative;top:-50%;}
#content{width:400px; height:200px; margin:0 auto;padding:20px; background:#000;border:1px solid #666;font-family:"黑体";font-size:40px;color:#fff;}
</style> 
</head> 
<body>  
<div id="outer">  
<div id="middle">  
<div id="inner">  
<div id="content">
怎样让HTML文档在网页中上下左右完全居中？使用这个方法，就可达到你想要的效果。
</div>  
</div>  
</div>  
</div>  
</body>
</html>

#1

用CSS控制

#2

<body style="...">  

这样？

#3

用CSS控制，建議不要調整body，而是用div，再設div的id＝“#main_container”就可以了

#main_container{
width:760px;
height:auto;
margin:auto;
padding-top:10%;
}

#4

引用 3 楼 sito_hongta 的回复:
用CSS控制，建議不要調整body，而是用div，再設div的id＝“#main_container”就可以了

#main_container{
width:760px;
height:auto;
margin:auto;
padding-top:10%;
}


......我要的就是要body 内容都在中间啊，就是我随便改变窗口大小，内容始终在中间 就是要
center和middle 哦

#5

<body id="css">  
#css{ 
width:760px; 
height:auto; 
margin:auto; 
padding-top:10%; 
}

#6

肯定需要自己写js了。你上网搜一下吧

#7

引用 5 楼 fengqiao1999 的回复:
<body id="css"> 
#css{
width:760px;
height:auto;
margin:auto;
padding-top:10%;
}


还是达不到 上下 middle 的效果 哦 ， 内容不在最中间

#8

我要的效果：

我任意调整窗口大小，内容始终在最中间 就是要 center and middle .

#9







怎么让网页(body)内容显示在正中间(左右的中、上下的中）？

#10

别晕丫，指点下额。

#11

来人丫

#12

svrmgrl connectinternal startup exit

#13

ding

#14

使用2个div来完成  楼主是否是想在不同分辨率下  页面内容都居中？

#15

引用 14 楼 lost11211333 的回复:
使用2个div来完成  楼主是否是想在不同分辨率下  页面内容都居中？


是丫， 2 个 div 怎么弄？

#16

顶

#17

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>  
body,html{margin:auto;height:100%;}
#outer{width:100%; height:100%;position:relative;}
#outer[id]{display:table;}
#middle{position:absolute;top:50%;}
#middle[id]{display:table-cell; position:static;vertical-align:middle}
#inner{position:relative;top:-50%;}
#content{width:400px; height:200px; margin:0 auto;padding:20px; background:#000;border:1px solid #666;font-family:"黑体";font-size:40px;color:#fff;}
</style> 
</head> 
<body>  
<div id="outer">  
<div id="middle">  
<div id="inner">  
<div id="content">
怎样让HTML文档在网页中上下左右完全居中？使用这个方法，就可达到你想要的效果。
</div>  
</div>  
</div>  
</div>  
</body>
</html>
标签：

相关文章