我在页面的右侧内容中心遇到了问题。
我的 HTML 页面是 2 列页面左列是固定的（高度 100% 和宽度 350 像素），右侧内容宽度是 575 像素，所以我想在所有屏幕中的右侧内容中心，例如屏幕宽度是 1600 像素，所以它是正确的侧边内容中心在 1250px (1600px-350px.
谢谢前辈
【问题讨论】：
margin: 0 auto;。
使用jquery根据屏幕分辨率计算宽度，然后动态应用宽度，如果你把代码放在这里我可以告诉你jquery代码如何动态应用。
根据您可以在 javascript 中通过此函数获得的分辨率计算宽度：
window.innerWidth
【讨论】：
http://caniuse.com/#feat=calc calc() 是一种原生的 CSS 数学方法。我们现在可以为内容列设置动态宽度。 对 calc() 的桌面支持相当不错。添加了不支持 calc() 时的回退。基于父级的最大宽度 1600px 添加 % 宽度回退。
html,body {
margin:0;
padding:0;
height:100%;
}
.left {
width:21.875%;/* fall back */
width:-moz-calc(350px);
width:-webkit-calc(350px);
width:calc(350px);
float:left;
background:red;
}
.main {
width:100%;
max-width:1600px;
margin:auto;
min-height:100%;
position:relative;
overflow:hidden;
}
.content {
width:78.125%;/* fall back */
width:-moz-calc(100% - 350px);
width:-webkit-calc(100% - 350px);
width:calc(100% - 350px);
float:left;
background:green;
}
【讨论】：
您可以使用相对父级。
有一个右侧内容的容器，绝对定位它并应用left等于左侧div的固定宽度，并应用right:0将其扩展到剩余宽度。
然后简单地利用旧的（因此有更多的浏览器支持）margin:0 auto 将内容定位在右侧容器 div 的中心...
<div id='wrap'>
<div id='left'>one</div>
<div id='right'>
<div id='content'></div>
</div>
</div>
css
html, body {
height:100%;
}
#wrap {
position:relative;
height:100%;
}
#left {
display:inline-block;
width:150px; // in your case 350
height:100%;
border:1px solid;
}
#right {
position:absolute;
top:0;
left:150px; // width of left content
right:0px;
height:100%;
}
#content {
width:575px;
height:100%;
margin:0 auto;
border:1px solid;
}
【讨论】：
从 right_content div 中删除 float: left 属性并在父 div 上添加 text-align: center，即右一个 div。
【讨论】：