水平居中 div

Posted 2023-03-05

【中文标题】水平居中 div

【英文标题】：centering div horizontally

【发布时间】：2013-03-30 23:39:42

【问题描述】：

我的页面布局：

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

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

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

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

【问题讨论】：

请发布实际代码，也许是一个小提琴。 jsfiddle.net

@isherwood 有趣的是你说过：JSFiddle 倒闭了...

【参考方案1】：

对于固定宽度：

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

对于动态宽度：

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

JSFiddle 不工作，但我会尽快搞定。

【参考方案2】：

如果我理解正确，如果指定了 div 的宽度，以下应该可以解决问题

div margin: 0 auto;