定位居中显示
Posted 循序渐进，不急不躁
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了定位居中显示相关的知识，希望对你有一定的参考价值。
一：预热回顾
1.CSS中每个元素都有定位特性，默认为static！
2.参照物 坐标系 坐标系单位（百分比、px）
absolute：若祖先标签不具备参照物特质（position：relative、absolute），则以浏览器窗口边框进行定位。
脱离文档流
relative： 以原始位置为参照物进行偏移。
没有脱离文档流, 之前的位置依然占用哦！ 设置高度后会撑开父元素的高度哦。
相对定位覆盖文档流。 相对定位元素之间也存在覆盖现象哦！
相对单位top属性用百分比无效？ 那就用px！ left、right属性就没这个问题哦！ why?
答：因为百分比是相对单位，是参照父元素的值决定的，因为在浏览器中，body的默认高度，并不是浏览器的可视区域高度。但是body的默认 宽度是浏览器的可视区域宽度。所以，body的高度是0px，20%也是0了。
所以用相对单位的时候一定要看父元素有无高度哦！不是默认高度哦 ！ 相对单位都是从父元素那里继承的高度哦！
3.top、left等值是可以取负值的哦！
方案一：定位实现
方案二： js实现
思路：可以这么做，在加载页面的时候执行个js方法；把div的左间距设置为浏览器当前的宽度减去div宽度的一半，
上下的话： 就把上间距设置为浏览器当前的高度减去div高的一半；
以上是关于定位居中显示的主要内容，如果未能解决你的问题，请参考以下文章