请选择 进入手机版 | 继续访问电脑版
建宸教程网 首页 教程网 css教程

谈谈CSS实现水平垂直居中布局的方法

2020-8-9 14:59
原作者: 建宸网络 收藏 分享 邀请

最近面试的时候,面试官问到了CSS水平垂直居中布局的方式,对于刚入前端没多久的我,无疑是一脸懵逼,闲了赶紧查阅资料分析一波,给各位分享一下,避免落坑。 首先先说明一下html和一些基础css样式,下面就不再赘述 ...

最近面试的时候,面试官问到了CSS水平垂直居中布局的方式,对于刚入前端没多久的我,无疑是一脸懵逼,闲了赶紧查阅资料分析一波,给各位分享一下,避免落坑。

首先先说明一下html和一些基础css样式,下面就不再赘述!
html




        


            
垂直水平居中


        


   

公共css代码如下




这些css样式在后续介绍中默认带上,不再赘述!

一、 absolute 和 margin auto(常用)

同样居中元素的宽高必须固定,并且需要得知子元素的宽高
这种方式通过设置各个方向的距离都是0,此时再将margin设为auto,就可以在各个方向上居中了


.div1{

                position: relative;

            }

            .box{

                position: absolute;

                top:0;

                left: 0;

                right: 0;

                bottom: 0;

                 

                margin: auto;

            }

二、absolute 和margin(负值)

简单说一下原理,利用了绝对定位,绝对定位的百分比是相对于父元素的宽高,所以我们可以根据这个原理将元素居中显示。但是要注意:绝对定位是基于子元素的左上角来说的,但是要想让子元素居中显示,就要解决这个问题。
此时可以利用margin的负值来实现效果,当外边距为负值时,元素向相反方向定位,这样我们将子元素的外边距设置为子元素的宽高的一半就可以实现了。(PS:缺点就是必须得到子元素的宽高)




.div1{

                position: relative;

5f27d2018b057957.jpg

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

粉丝 阅读205 回复0
上一篇:
下一篇:
css中的display属性有哪些值?各有什么作用?发布时间:2020-08-09

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )