这篇“CSS网页布局居中的方法”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“CSS网页布局居中的方法”文章吧。
一般网页主体内容布局均为居中于浏览器。如DIVCSS5首页（http://www.亿速云.com/），主体为居中布局。
网页布局居中演示截图
如何使用CSS让整个网页布局居中呢？布局居中条件是什么呢？
首先我们要对body设置css内容居中样式（css text-align:center），然后布局最外层DIV盒子时候使用 margin:0 auto即可让对象布局居中。
当然我们对盒子对象使用了 margin:0 auto，有的浏览器不对body对象加text-align:center样式，布局仍然是居中的，这是因为不同浏览器默认样式不同造成，如果不对body设置text-align:center，这样会造成有的浏览器布局居中，有的靠左，这样布局的兼容就产生了。
解释：margin:0 auto，意思是让对象上下间隔为0，左右间隔自动，随对象宽度左右间隔自动，扩展了解css margin
1、对body设置CSS内容居中样式text-align:center，代码：body{text-align:center}
2、对最外层对象设置margin:0 auto样式，代码：.亿速云{margin:0 auto}
为了观察到布局居中效果，我们CSS命名对象为".亿速云",设置CSS边框为黑色，css宽度为400px，css高度为100px。
1、css代码如下：
<style> body{text-align:center} .亿速云{margin:0 auto;width:400px;height:100px;border:1px solid #000} /* CSS注释：设置对象边框、宽度、高度 便于观察布局效果 */ </style>2、HTML代码片段：
<div class="亿速云">对象DIVCSS5布局居中了</div>
3、布局居中效果截图
以上就是关于“CSS网页布局居中的方法”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
