html - 响应式的 CSS 中心

Question

我有一个居中的网页，现在我已经使用媒体查询调整了它的大小，但我不知道如何实现类似 stackoverflow 本身的东西。一旦你减小了页面的宽度，它就会变得越来越小，而且 margin-left 会逐渐减小到零；所以在某一时刻页面会填满整个窗口。我使用了很多 margin-left: 25% 来使页面居中，但这并不像我想要的设计那样工作。调整浏览器窗口的大小后，页面宽度变小并保持居中，但我并不是真的希望宽度变小，而是减少页面左右两侧的空间。

例如，这是我使用的标题:

margin-top: 3%;
float:left;
font-size: 350%;
margin-left: 25%;
width:10%;

这是网站的“中间”部分，背景为白色:

position: absolute;
border-radius: 3px;
top: 0px;
left: 21%;
width: 58%;
min-height: 100%;
background: white;
z-index: -1;
-webkit-box-shadow: 20px 0px 30px 0px rgba(0,0,0,0.5), -20px 0px 30px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 20px 0px 30px 0px rgba(0,0,0,0.5), -20px 0px 30px 0px rgba(0,0,0,0.5);
box-shadow: 20px 0px 30px 0px rgba(0,0,0,0.5), -20px 0px 30px 0px rgba(0,0,0,0.5);

抱歉，这可能很简单，但我真的不明白...

谢谢

Answer 1

我认为您需要将左右边距设置为自动。不是 25%。

像这样:

margin-left:auto;

margin-right:auto;

但是您必须定义应用 auto 值的容器的宽度。

如果您查看您在评论中提供的示例网站的 CSS:

#mainbody {
   width: 980px; /*this line*/
   text-align: center;
   vertical-align: top;
   padding: 0;
   margin: auto; /*this line*/
   height: auto;
   background: #fff;
}