html - 水平居中div

Question

我的页面布局:

div for header : position: fixed
div for sidebar: float: left              div for content: float:left
div for footer : position: fixed

这些位置被设置成这样，无论用户位于滚动条的哪个位置，页脚和页眉始终可见。然而侧边栏随页面滚动。

内容的 div 包含一个 ui:insert，因此所有页面都加载到那里。现在在其中一个页面中，我希望内容在分配的空间内居中。为此，该页面的所有内容都放在一个 div 中。无论窗口拉伸(stretch)到什么大小，我必须使用什么样式才能使内容始终水平居中。我可以为 div 的宽度指定一个固定值。

我不能将位置设置为绝对位置或固定位置，因为这会破坏整体设计。

Answer 1

对于固定宽度:

div.center {
    width: 300px;
    margin: 0 auto;
}

对于动态宽度:

div.center {
    width: 50%;
    margin: 0 25%;
}

JSFiddle 不工作，但我会尽快弄一个。