单个div对象层水平居中布局实例
2019年11月30日
作者：佚名
单个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即可实现。
一、布局居中条件在DIVCSS5中介绍过很多篇布局居中教程，比如布局居中代码、布局居中条件等，实际上都是说对一个最外层DIV盒子设置margin:0 auto后此盒子兼容各大浏览器居中。
二、单个DIV层居中实例思维这里为了观察到DIV是否居中，此时我们设置一个DIV样式分别给予CSS宽度、CSS高度、CSS边框样式，当然别忘记关键居中样式margin:0 auto，当然一般严谨地说，让一个DIV布局居中，最好对body设置一个text-align:center（CSS内容居中）样式，这样就更加完美。
三、CSS实例具体内容1、完整代码（CSS+HTML）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>单个div居中 DIVCSS5 在线演示</title> <style> body{ text-align:center} .box{margin:0 auto;width:400px; height:100px;border:1px solid #F00} </style> <!-- www.divcss5.com --> </head> <body> <div class="box">DIV盒子居中</div> </body> </html>
2、DIV CSS实例效果截图
单一div盒子居中实例效果截图
3、在线演示
查看案例
4、打包下载
立即下载（0.863KB）
