Question

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

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

Answer 1

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

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

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

.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; }

Answer 2

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

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

CSS（页面宽度为50％，顶部/底部边距为零）：

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

Answer 3

在您的所有内容周围放置另一个div（因此从您的身体开始标记之后和身体结束标记之前）。称之为<div class="container">

将以下样式设置为该div：

width: 1000px;
margin: auto;

这应该使您的内容居中。

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

Answer 4

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

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

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

5 个答案: