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

【问题标题】：How to set page content to center of the browser?如何将页面内容设置为浏览器的中心？
【发布时间】：2012-12-11 07:30:28
【问题描述】：

我需要的是在浏览器的中心显示网页的内容，无论屏幕大小，大小，分辨率高或低，它总是自动调整到浏览器的中心。提前致谢

我的 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;
}

【问题讨论】：

标签： html css

【解决方案1】：

将所有内容放在一个div中，将其类设置为container：

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

然后使用 css 将其边距设置为自动：

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

看看at this jsfiddle

编辑

检查 this new fiddle ，menu css 并不需要你写的所有内容，应该是这样的：

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

【讨论】：

【解决方案2】：

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

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

CSS（50% 页面宽度，零上/下边距）：

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

【讨论】：

【解决方案3】：

在你的所有内容周围放置另一个 div（所以从你的正文开始标签之后和正文结束标签之前）。叫它<div class="container">

为该 div 设置以下样式：

width: 1000px;
margin: auto;

这应该使您的内容居中。

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

可行的解决方案。

<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>

【讨论】：