3种方法:如何让一个div在垂直水平方向上居中对齐?

新手在处理网站建设页面的时候,常常会遇到:css让不定宽高的div,垂直水平居中的问题,下面就分享三种方法来实现:

方法一: flex弹性布局(这样操作方式最多,最常用)

.div{ display: flex; justify-content: center; align-items: center; width: 400px; height: 400px; background-color: #fff; } .div2{ background-color: pink; }

 

方法二:使用transform

.div{ background-color: #fff; width: 400px; height: 400px; } .div2{ position: relative; top: 50%; left: 50%; transform: translate(-50%, –50%); background-color: pink; }

 

方法三: 绝对定位position

.div{ position: relative; width: 400px; height: 400px; background-color: #fff; } .div2{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-color: pink; }

看完后不妨自己本地都测试一下奥,看看这三种都有啥区别~

本站坚持“不能用的源码发出去都是浪费大家时间“,付费源码都是亲测的
源码已测试,但不保证完美无bug
洽单资源库仅提供学习的平台,所有资料均来自于网络,版权归原创者所有!本站不提供任何保证,并不承担任何法律责任,如果对您的版权或者利益造成损害,请提供相应的资质证明,请联系客服予以删除。

洽单资源库 » 3种方法:如何让一个div在垂直水平方向上居中对齐?

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
提示下载完但解压或打开不了?
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
找不到素材资源介绍文章里的示例图片?
对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
洽单资源库
一个免费分享价值的学习平台

提供最优质的资源集合

立即查看 了解详情