1

所以我知道这是另一个中心问题，但我已经在谷歌和 SO 周围漫游了几天，没有解决方案，所以我现在就问。

我正在尝试做的是水平居中一个最大宽度的流体部分元素，其中包含绝对定位的元素。问题是，正如您在我的jsFiddle中看到的那样，边距占可用空间的 50%，而其他 50% 由该部分使用。我想做的是使该部分完全居中，但随着浏览器窗口的关闭使边距变小，同时保持该部分不重新调整大小，直到窗口边缘到达它为止。

我不想使用任何表格、表格单元格的解决方案，因为我在 CSS-Tricks 上读到，绝对定位表格单元格内的元素可能会很痛苦。

编辑基本上，目标是在不调整大小的情况下让内容占用尽可能多的空间，直到视口宽度强制内容响应。

感谢您朝着正确的方向前进。

HTML：

<section id="wrapper">
    <section id="content">
        <p>Absolutely positioned imgs, btns, etc. go in here</p>
    </section>
</section>

CSS：

#wrapper {
position:absolute;
width:50%;
height:300px;
margin-left:25%;
margin-right:25%;
outline:1px solid red;
}
#content {
position:absolute;
width:100%;
height:100%;    
max-width:500px;
background:rgb(225, 112, 75);
}
4

2 回答 2

1

您可以使用 

#content {
    display:inline-block;
    text-align:center;
}

将您的元素居中，这些元素也将具有display:inline-block;属性。

编辑：现在我已经更好地阅读了你的问题，你也可以使用 

#content {
        margin:0 25%;
    }

使您的第二部分居中。

这是你的小提琴更新。 正如您在这个小提琴中看到的那样，现在一切都居中且响应迅速。

EDIT-2：也许你想添加一些媒体查询来达到你的目标。只需在 CSS 文件的末尾添加如下内容： 

@media screen and (max-width:720px){
    #content{width:100%; margin:0px;} 
}

这表示当屏幕达到 720 及以下的宽度时，#content（以及您放入其中的每个 ID/CLASS）将按照声明的方式运行。

请注意，@media查询不是跨浏览器的，您可能需要添加一个脚本以使它们在每个浏览器上都可以工作，我发现respond.js是一个很好的工具来完成这项工作。

另请注意，@media查询必须至少放置在您即将在屏幕调整大小时更改的默认属性下，这就是为什么建议将它们添加到您的 css 文件底部的原因。

这里是另一个应用媒体的小提琴（只需尝试调整框大小以查看效果）

于 2013-04-15T08:34:14.063 回答
0

我想知道这是否是您要找的东西：jsfiddle

我将您的包装更改为：

#wrapper {
    position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -200px;
    width:400px;
    height:300px;
    outline:1px solid red;
}

这样您的 div 现在就位于屏幕中间

于 2013-04-15T08:41:12.093 回答