定位居中显示

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高的一半;

     

以上是关于定位居中显示的主要内容,如果未能解决你的问题,请参考以下文章

定位居中显示

元素定位后如何居中

元素居中显示

React Native 绝对定位水平居中

使定位元素居中的4种方法例举

Raphael js 文本定位:将文本居中在一个圆圈中