我试图在侧边栏留空的空间中居中.这就是我喜欢它的样子：
我实际上设法使这个工作对大多数浏览器使用margin：auto为div有问题,同时设置overflow：hidden：
CSS
#header {
height: 50px;
background: #224444;
color: #fff;
}
#container div {
padding: 1em;
}
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
}
#sidebar {
float: right;
width: 200px;
background: #aaa;
height: 300px;
}
HTML
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content">
Centered Content
(Works everywhere but on IE9)
</div>
</div>
但是,它不适用于IE9. IE8工作正常,这很奇怪！
我的想法已经不多了,所以我想也许有人知道发生了什么？这个技巧似乎在其他任何地方都很有效.
注意：请注意,内容div应该像演示中一样灵活.随着可用空间的减少,它应该改变尺寸并挤入.
解决方法
将中心与浮动隔离
这会影响IE9 / 10.
如果移除浮动元素,或者使用宽度而不是max-width,它可以正常工作.浮动内容的存在,加上使用边距：自动和最大宽度而不是宽度,似乎让IE9感到困惑.
要解决此问题,请将居中内容放在包装器div中,以便内容的居中可以与侧边栏的浮动分开.换句话说,在单个div中布局方面发生的太多,比IE9更能处理.所以将#content div分成两个独立的div.
#header {
height: 50px;
padding: 1em;
background: #224444;
color: #fff;
}
#content-wrapper {
overflow: hidden;
}
#content {
max-width: 400px;
margin: auto;
padding: 1em;
background: #ddd;
height: 300px;
}
#sidebar {
float: right;
width: 200px;
padding: 1em;
background: #aaa;
height: 300px;
}
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content-wrapper">
<div id="content">
Centered Content
</div>
</div>
</div>
