响应式 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;
}