CSS网页布局居中的方法

这篇“CSS网页布局居中的方法”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“CSS网页布局居中的方法”文章吧。

十载的榆林网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整榆林建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联建站从事“榆林网站设计”,“榆林网站推广”以来，每个客户项目都认真落实执行。

一、让DIV+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

二、小结DIV CSS网页布局居中条件  

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代码如下：

2、HTML代码片段：

对象DIVCSS5布局居中了