JavaScript中标签的居中问题

    作为学习前端的菜鸟，写实践项目的时候总会出现各种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去掉。

欢迎留言讨论！