作为学习前端的菜鸟，写实践项目的时候总会出现各种bug。之前写作业，做一个网站的页面，标签元素居中这样的操作总会出错，于是下定决心写完作业后一定好好把这个问题解决。于是就写下了这篇小文章，望路过的大神指出错误，欢迎大家留言讨论。有错轻喷，谢谢！
首先对标签进行分类
block(块级元素):
div p h1-h6 ul-li ol-li address table tr form
inline(行级元素):
span strong em del a b i
inline-block(行级块元素):
img input select
margin:0 auto;处理居中问题
对标签进行样式设置的时候，块元素是最好操作的，设置什么属性，就会显示出来。所以如果不确定标签属于哪一种类型，最好的在CSS样式表里面加上一句display:block。那么你设置的所有样式就会显示出来了。
position居中定位
position定位有三个值可以填写:absolute，relative，fixed.
absolute: 相对于离它最近的有定位的父级进行定位，若没有则相对于浏览器窗口定位，并且会覆盖在它后面的元素。
relative: 相对于它出生的位置进行移动，而且不会覆盖它后面没有absolute定位的元素。
fixed: 只相对于浏览器窗口定位。
下面是用position定位的代码截图:
JavaScript中标签的居中问题
效果如下图所示，absolute和relative一样。
JavaScript中标签的居中问题
原理如下图所示:先到1位置，再到2位置
JavaScript中标签的居中问题
不过若你同时把relative和margin:0 auto;打开代码如下图
JavaScript中标签的居中问题
效果又会不一样，如下图:图中黄色区域的宽度和淡紫色div的宽度一样，都是300px。蓝色的span首先定位left:50％，top:50％，然后margin:0 auto的覆盖导致margin-left和margin-top失去作用。蓝色的span依然相信自己还在div里，执行margin:0 auto;左右自动调节距离居中。
JavaScript中标签的居中问题
所以在进行居中定位的时候，为防止出错一定要把display:block加上，要么用margin:0 auto自动居中，要么用position:absolute，因为absolute绝对定位可以覆盖其他的居中方式。如果用position:relative，就一定要把margin:0 auto去掉。
欢迎留言讨论！
网友评论