爱站程序员基地##关于使用text-align:center和margin:0 auto 两种居中方式的比较前言:最近由于要学习后端，需要提前学习一部分前端知识，补了补css知识，发现狂神在讲这一部分讲的不是特别清楚，于是自己决定试一试
1.需要先了解块级元素和行间元素
块级元素有:div（div默认是块级元素），p标签，h1-h6等；行间元素有:a标签，img标签等两者区别就是，块级元素可以独占一行，之后的默认存在换行符，行间元素可以多个处于一行内，只有超过外部边框的时候会换行。
2.问题的引出
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div id="frame"><img src="背景.jpg" ></div></body></html>
一个非常简单的测试得到的界面是：
想要将这个图片居中，我们应该怎么操作。
text-align：center将块中元素向中对齐margin：0 auto 将外边距设置为上下为0px，左右各占所在框的一半
3.解决方法
思路一：由于div标签是块级元素，所以我认为直接在外层的div中使用text-align:center，就可以将div存在的元素img移动到中间去
选中这一个图片查看，可以看到，这样一个块是占满这一行，它的width应该就是屏幕的宽度通过设置
<div style="text-align:center;">
实现了要求。思路二:通过将img变为块级元素后，再通过设置外边距margin来实现要求
<img src="背景.jpg" style="display: block; margin: 0 auto;" >
由于我也是刚学，其实这里还有一些疑问，我觉得当我设置display:block的时候，我在浏览器的开发者工具下查看img元素，蓝色应该会占满每个block的区间
