在无侧边栏区域居中 <div>

Question

我需要将此 #wrapper <div> 置于页面无侧边栏区域的中心。使用这些选项，它会以整个 <body> 为中心并位于侧边栏后面。

#wrapper /* Centers #posts <div>, but at the same time it makes #posts <div> go behind the sidebar, which I don't want to. */ {
    width: 800px;
} 
#posts {
    width: 800px;
    float: left; /* Is needed for the Masonry script. */
}
.entry /* Sets options for each post in two columns in #posts <div>. */ {
    width: 400px; /* Musthave option too. */
}
#sidebar {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 250px;
    height: 100%;
    display: table; /* Is needed for centering stuff inside of the sidebar. */
}

<body>
    <div id='wrapper'> <!-- This one is supposed to be centered in the sidebar-free area on the page. -->
        <div id='posts'>
            <!-- Here are all of the posts. -->
                <div class='entry'>
                </div>
        </div>
    </div>
    <div id='sidebar'>
    </div>
</body>

现在的样子：

我看起来像什么：

Answer 1

额外CSS

#main-content {
    position: absolute;
    top: 0;
    left: 250px;
    right: 250px;
    bottom: 0;
}

#wrapper {
    width: 800px;
    margin: 0 auto;
}

主要HTML

<body>
    <div id='main-content'>
        <div id='wrapper'> <!-- This one is supposed to be centered in the sidebar-free area on the page. -->
            <div id='posts'>
                <!-- Here are all of the posts. -->
                    <div class='entry'>
                    </div>
            </div>
        </div>
    </div>
    <div id='sidebar'>
    </div>
</body>

Answer 2

这是一个http://fiddle.jshell.net/p05drxpk/1/

首先，我将正文设置为：

body{
    width: 100%;
    margin: 0;
    padding: 0;
}

我还设置了百分比而不是像素，并设置了 box-sizing，这样填充就不会扩展到不适合的元素。

Answer 3

您可以在正文中添加一些内边距以补偿侧边栏的宽度。如果添加与侧边栏宽度相同的填充量，整个主体将被推向左侧。请查看代码段。

如果不需要支持，也可以使用flex-box来实现

/* New =================================================================== */

body {
    /* Push content of the body to the left. Use same amount as the sidebar width */
    padding-right: 250px;
    /* Remove default margin */
    margin: 0;
}

#wrapper {        
    /* Centers the wrapper */
    margin: 0 auto;
}

/* Old =================================================================== */

#wrapper /* Centers #posts <div>, but at the same time it makes #posts <div> go behind the sidebar, which I don't want to. */ {
    width: 800px;
} 
#posts {
    width: 800px;
    float: left; /* Is needed for the Masonry script. */
}
.entry /* Sets options for each post in two columns in #posts <div>. */ {
    width: 400px; /* Musthave option too. */
}
#sidebar {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 250px;
    height: 100%;
    display: table; /* Is needed for centering stuff inside of the sidebar. */
}

/* Demo ============================================================= */

#wrapper {
    /* So you can see it in the demo */
    height: 80px;
    background: red;
}

#sidebar {
    /* So you can see it in the demo */
    height: 80px;
    background: blue;
}

<body>
    <div id='wrapper'> <!-- This one is supposed to be centered in the sidebar-free area on the page. -->
        <div id='posts'>
            <!-- Here are all of the posts. -->
                <div class='entry'>
                </div>
        </div>
    </div>
    <div id='sidebar'>
    </div>
</body>

Answer 4

我想我明白了，试试这个：

#wrapper /* Centers #posts <div>, but at the same time it makes #posts <div> go behind the sidebar, which I don't want to. */ {
  width: calc(100% - 250px);
  height: 500px;
  background-color: purple;
} 
#posts {
  margin-right: calc(50% - 400px);
  width: 800px;
  background-color: blue;
  height: 500px;
  float: right; /* Is needed for the Masonry script. */
}
.entry /* Sets options for each post in two columns in #posts <div>. */ {
  width: 400px; /* Musthave option too. */
}
#sidebar {
  position: fixed; 
  background-color: red;
  top: 0px;
  right: 0px;
  width: 250px;
  height: 100%;
  display: table; /* Is needed for centering stuff inside of the sidebar. */
}

我使用 calc() 函数在中间获取帖子 ID。 calc() 函数中使用的公式基本上是全角 - 这个 class 元素的一半是为（帖子 id）创建的，对于包装器 id，它是 calc（全角 - 侧边栏 id full-宽度）。

在无侧边栏区域居中 <div>

Centering <div> in a sidebar-free area

html

javascript

css