如何使用填充集中溢出容器？

Question

我需要将溢出的容器（div或section）居中，这个容器有填充并且它在体内。 容器是固定宽度（例如500像素）并且水平填充100个像素。我怎么能把这个容器集中化？

我试过以下：

#wrapper {
    text-align: center;

    margin: 0px auto;
    padding: 0px 100px;
    width: 500px;
}

http://jsfiddle.net/Volter9/tu6yg5ch/

如果您将结果选项卡的宽度更改为小于700像素，您将看到该容器未正确居中。

感谢您的关注！

Answer 1

这可能是一种方法。您需要使用position: relative或position: absolute定位。

要使用的定位类型取决于布局的其他方面，例如， 如果你在包装器之后有其他元素，那么包装器和包装器的任何固定高度 等等。

body {
    overflow-x: hidden;
}

#wrapper {
    text-align: center;
    border: 1px dotted black;
    margin: 0px auto;
    padding: 0px 100px;
    width: 700px;
    position: relative;
    left: 50%;
    margin-left: -350px;
    box-sizing: border-box;
}

<div id="wrapper">
    content
</div>

注意：边框框属性并非绝对必要。需要margin-left值 包装元素总宽度的一半，因此您需要对计算结果进行数学计算 包装块的宽度。