我想这个是我们经常遇到的一个问题，当然对很多人来说，这是个很简单，很容易解决的问，在这里优畅只是把这些常用的方总结下。
这个方法我想是大部分人在用的，也是最简单的。我们先设定marign: 0 auto，即上下边距为0，左右为自动，这样在IE7、Firefox、Opera等浏览器中就能实现居中了。
div#wrap {
width:760px;
margin:0 auto;
border:1px solid #666;
background-color:#eee;
}
但这在IE6中是不起作用的，在IE6中我们得用text-align:center.在IE中text-align属性是可继承的，即在父元素中设置后在子元素中就默认具有了该属性。因此我们可以在body标签中设置text-align属性值为center，这样页面内所有的元素都会自动居中.现在我们修改下代码如下:
body { text-align:center; }
div#wrap {
text-align:left;
width:760px;
margin:0 auto;
border:1px solid #666;
background-color:#eee;
}
这种方法我想用的人比较少，但这也是一个简单又有效的方法。
我们设置wrap的定位是相对于其父元素body标签的，然后将其左边框移动到页面的正中间（也就是left:50%含意）；最后我们再从中间位置向左偏移回一半的距离来，这样就实现了水平居中了。
div#wrap {
position:relative;
width:760px;
left:50%;
margin-left:-380px;
border:1px solid #666;
background-color:#eee;
}
body {
padding:10px 150px;
}
div#wrap {
border:1px solid #666;
background-color:#eee;
}
拥有多年WordPress博客/企业建站开发经验，独树一帜的设计，提供最专业的网站设计方案；原创的主题标签语义化，增强网站优化效果。
增强用户体验、提高品牌形象给人留下深刻的印象，那就选择我们，我们的每一款主题都是独一无二的，都有自己的灵魂，每款主题都有各自的配色方案。
遵循现代网页设计的趋势，所有主题都提供完整的响应式布局，优化大桌面显示器以及对平板和智能手机的支持，从而提供一致性的用户体验。
长期及时地在线售后服务和免费升级更新，确保您的网站始终运行在最佳状态，24小时QQ在线的沟通方式免去您的后顾之忧，替您节省网站维护成本。
© 2012- 2024 uctheme All Rights Reserved 优畅主题 版权所有 苏ICP备13009847号
目前还没有评。