如何将页面内容设置为浏览器的中心？

我需要的是在浏览器中心显示一个网页的内容，无论它是什么大小的屏幕大小，分辨率高低，它总是自动调整到浏览器的中心位置。在此先感谢如何将页面内容设置为浏览器的中心？

我的HTML和CSS代码如下

HTML代码

<!DOCTYPE html> 
<html> 
    <head> 
     <link type="text/css" rel="stylesheet" href="basic1.css"/> 
    </head> 
<body> 

    <div id="menu"> 
     <a href = "#"><img class="imgc" src="img.png" alt="icon"/></a> 
     <a href = "#"><img class="imgd" src="do.png" alt="do"/></a> 
    </div> 
     <div id="smenu"></div> 
    <div id="mainbox"> 
     <div class="ibox"></div> 
    </div> 
    <div id="menutext"> 
    <ul> 
     <li><a href="#"><b>???????</b></a></li> 
      <li><a href="#"><b>?????</b></a></li> 
     <li><a href="#"><b>?????</b></a></li> 
     </ul> 
    </div> 
    <div id="py"> 
     <pre class="p">??<span style="color:black;font-size:25px">??????</span></pre> 
     <pre class="s">?? ???? ??? ??? <span style="color:#980000; 
     letter-spacing :+1mm"><b>:3</b></span></pre> 
    </div> 

    </body> 
    </html>

CSS

#menu img.imgc { 
position:absolute; 
right:77%; 
top:10px; 
margin:0px auto; 
} 
#menu img.imgd { 
position:absolute; 
left:75%; 
top:10px; 
margin:0px auto; 
} 
#menu { 
position:absolute; 
left:0%; 
top:0%; 
right:0%; 
right:0%; 
width:100%; 
height:125px; 
border-bottom:1px solid #C8C8C8; 
margin:0px auto; 
background-color:#E8E8E8; 
} 
#mainbox div.ibox{ 
position:absolute; 
left:31%; 
top:20px; 
border-left:3px solid gray; 
height:105px; 
margin:0px auto; 
} 
#menutext ul{ 
position:absolute; 
right:72%; 
top:15px; 
list-style: none; 
line-height:30px; 
margin:0px auto; 
} 
#menutext a{ 
font-size:12px; 
font-variant:small-caps; 
font-family:Lucida,Helvetica,sans-serif; 
font-weight:500; 
color:black; 
text-decoration: none; 
text-align: left; 
} 
#py pre.p{ 
position:absolute; 
top:15px; 
left:33%; 
font-family:Tahoma, Geneva, sans-serif; 
letter-spacing : +2mm; 
font-size:50px; 
color:#009933; 
text-decoration: none; 
text-align: center; 
margin:0px auto; 
} 
#py pre.s{ 
position:absolute; 
top:67px; 
left:33%; 
font-family:Tahoma, Geneva, sans-serif; 
letter-spacing : +3mm; 
font-size:12px; 
color:gray; 
text-decoration: none; 
text-align: center; 
margin:0px auto; 
}

来源

2012-12-25 shuvo Oo

把所有的内容一个div内部，设置id't类container：

<div class="container"> 
    ... 
</div>

比使用CSS设置它的边距自动：

.container{ 
    margin:0px auto; 
    width: 600px; 
}

看看at this jsfiddle

编辑

检查this new fiddle的menu CSS不NEET大家写的东西，应该是这样的：

#menu { 
height:125px; 
border-bottom:1px solid #C8C8C8; 
margin:0px auto; 
background-color:#E8E8E8; 
}

来源

2012-12-25 07:59:19 Kuf

换个格周围所有的内容（所以从右侧后您的身体开始标记和身体结束标记之前）。说它<div class="container">

设置以下的风格到DIV：

width: 1000px; 
margin: auto;

这应围绕你的内容。

您可以根据需要更改宽度。

来源

2012-12-25 07:55:33

将所有页面内容放在一个包装div中，然后给它一些相对宽度（例如50％）和自动水平边距。

<div id="wrapper"> 
    <!-- CONTENT GOES HERE --> 
</div>

CSS（50％页面宽度，零顶部/底部余量）：

#wrapper { 
    width: 50%; 
    margin: 0 auto; 
}

来源

2012-12-25 07:55:45 n00dle

你可以使用fundation3的网格： http://foundation.zurb.com/docs/grid.php

来源

2012-12-25 08:09:33

工作解决方案。

<html> 
      <head> 
      <style type="text/css"> 
       html 
       { 
        width: 100%; 
        height: 100%; 
       } 

       body 
       { 
        display: flex; 
        justify-content: center; 
        align-items: center; 
       } 
      </style> 
     </head> 

     <body> 
      This is text! 
     </body> 
</html>

来源

2014-10-22 12:11:10 Vinayak

如何将页面内容设置为浏览器的中心？

回答

相关问题