CSS实现定位元素居中的方法

2021-01-26 09:23:00 1809 5 编辑:深正互联 来源:互联网

绝对定位元素的居中实现


如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了。


兼容性不错的主流用法是:


CSS Code复制内容到剪贴板

.element {   

    width: 600px; height: 400px;   

    position: absolute; left: 50%; top: 50%;   

    margin-top: -200px;    /* 高度的一半 */  

    margin-left: -300px;    /* 宽度的一半 */  

}  

但是,这种方法有一个很明显的不足,就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时,往往要借助JS获得。


绝对定位


CSS3的兴起,使得有了更好的解决方法,就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的,于是,我们可以:


CSS Code复制内容到剪贴板

.element {   

    width: 600px; height: 400px;   

    position: absolute; left: 50%; top: 50%;   

    transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */  

}  

于是乎,无论绝对定位元素的尺寸是多少,其都是水平垂直居中显示的。


然而,问题很明显,兼容性不好。IE10+以及其他现代浏览器才支持。中国盛行的IE8浏览器被忽略是有些不适宜的(手机web开发可忽略)。


实际上,绝对定位元素的居中实现还有另外一种方法,可以说是权衡了上面的尺寸自适应以及兼容性的一个方案,其实现的核心是margin:auto.



margin:auto实现绝对定位元素的居中


首先,我们来看下CSS代码:


CSS Code复制内容到剪贴板

.element {   

    width: 600px; height: 400px;   

    position: absolute; left: 0; top: 0; rightright: 0; bottombottom: 0;   

    margin: auto;    /* 有了这个就自动居中了 */  

}  

代码两个关键点:


    上下左右均0位置定位;

    margin: auto


于是,就居中了。上面代码的width: 600px height: 400px仅是示意,你修改为其他尺寸,或者不设置尺寸(需要是图片这种自身包含尺寸的元素),都是居中显示的。很有意思的~~


本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询
微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

深正互联微信
扫描即可沟通