这篇文章主要介绍“css布局居中和CSS内容居中的区别是什么”，在日常操作中，相信很多人在css布局居中和CSS内容居中的区别是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css布局居中和CSS内容居中的区别是什么”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
1、CSS DIV布局居中
布局居中是对框架盒子本身设置。让网页主体水平居中于浏览器中，就需设置margin:0 auto实现布局居中。
布局居中针对框架盒子本身居中。
布局居中主要是对布局框架设置比如（DIV盒子）设置。一般网页布局中最外层主体框架设置布局居中样式（margin:0 auto）实现。如果不设置布局居中代码，其有的浏览器中主体是居中的，但有的浏览器中靠左显示，引起兼容性问题，所以要让一个盒子水平居中于浏览器中就必须设置一个margin:0 auto样式。
特点：实现居中非常特别使用margin样式实现，需要特别注意。
2、CSS DIV内容居中
和DIV布局居中有着同样居中字眼的内容居中，则是对盒子里内容（文字、图片等内容）实现水平居中。使用CSS样式单词与值代码为text-align:center。不管是对div标签、h2标签、h3标签、p标签等html元素标签设置都能让其对于盒子里内容水平居中。
扩展CSS代码：
CSS内容居中：text-align:center
CSS内容靠左：text-align:left
CSS内容靠右：text-align:right
CSS布局居中：对框架设置水平居中（比如对DIV本身设置DIV水平居中于浏览器中）。
CSS内容居中：对盒子里的内容设置水平居中（比如DIV内放到图片、文字等内容）
CSS布局居中实现主体水平居中于浏览器；CSS内容居中实现框架盒子内的内容居中。拿DIV布局来说，前者对DIV框架盒子本身设置水平居中，后者对DIV里装的内容水平居中。
1、布局居中
为了能观察到布局居中效果，我们对一个DIV设置css宽度300px;css高100px；CSS边框为红色，并设置布局居中代码margin:0 auto
1）、完整DIV CSS代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>简单布局实例 DIVCSS5</title> <style> .亿速云{ margin:0 auto; width:300px; height:100px; border:1px solid #F00} </style> </head> <body> <div class="亿速云">布局居中简单实例</div> </body> </html>2）、布局居中效果截图
2、内容居中
为了能观察到内容居中、居左、居右效果，我们设置3个div盒子同样宽度300px;高100px；CSS边框为红色，分别设置居中、居右、居左样式。
1）、完整HTML代码（DIV CSS代码）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>简单内容居中与布局居中实例 DIVCSS5</title> <style> .亿速云{margin:0 auto;width:300px;height:100px;border:1px solid #F00;text-align:center;} </style> </head> <body> <div class="亿速云">布局居中 与 内容居中简单实例</div> </body> </html>加了text-align:center即可实现让盒子内内容居中
2）、内容居中效果截图
到此，关于“css布局居中和CSS内容居中的区别是什么”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
