html<div>层居中,单个div对象层水平居中布局实例

单个div对象层居中布局实例

特别是新手在对待居中这一词布局时深感疑惑，比如div布局居中、css内容居中等词语是可能比较犯糊涂，这里DIVCSS5为大家介绍单个div层居中实例。

CSS内容居中很简单使用CSS text-align实现(text-align:center这样即可让对象内的内容水平居中)。

布局居中或div布局居中，此时将使用margin样式，可能对新手来说margin好像与居中这一词不相干，但恰巧margin对应div布局居中联系非常紧密。在不设置margin:0 auto时，最外层DIV布局有的浏览器默认居中、有的浏览器靠左，出现这样情况，就是有的浏览器默认情况对div默认给予了margin:0 auto居中，而有的浏览器没有给予margin:0 auto居中，所以要让DIV盒子布局居中只需要margin:0 auto即可实现。

一、布局居中条件   -   TOP

在DIVCSS5中介绍过很多篇布局居中教程，比如布局居中代码、布局居中条件等，实际上都是说对一个最外层DIV盒子设置margin:0 auto后此盒子兼容各大浏览器居中。

二、单个DIV层居中实例思维   -   TOP

这里为了观察到DIV是否居中，此时我们设置一个DIV样式分别给予CSS宽度、CSS高度、CSS边框样式，当然别忘记关键居中样式margin:0 auto，当然一般严谨地说，让一个DIV布局居中，最好对body设置一个text-align:center(CSS内容居中)样式，这样就更加完美。

三、CSS实例具体内容   -   TOP

1、完整代码(CSS+HTML)

html>

单个div居中 DIVCSS5 在线演示

body{ text-align:center}

.box{margin:0 auto;width:400px; height:100px;border:1px solid #F00}

DIV盒子居中