Question

所以我知道这是另一个集中问题但是我已经在谷歌和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);
}

Answer 1

您可以使用

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

将具有display:inline-block;属性的元素居中。

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

#content {
        margin:0 25%;
    }

将你的第二部分集中在一起。

here's your fiddle updated.正如你可以从这个小提琴中看到的那样，现在一切都集中在一起并做出反应。

EDIT-2 ：也许您想添加一些媒体查询来实现目标。只需在CSS文件的末尾添加这样的内容：

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

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

请注意，@media查询不是crossbrowser，您可能希望添加一个脚本以使其适用于每个浏览器，我发现respond.js是一个很好的工具来完成这项工作。

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

应用了媒体的

HERE is another fiddle（只是尝试调整框大小以查看效果）

Answer 2

我想知道这是否是你要找的：jsfiddle

我将你的包装器更改为：

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

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

使流体绝对定位的部分居中

2 个答案: