从品牌网站建设到网络营销策划,从策略到执行的一站式服务
这篇文章主要介绍了web中怎么用绝对定位实现垂直居中,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
正镶白网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作,到程序开发,运营维护。创新互联自2013年创立以来到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联。
HTML代码:
CSS代码:
body{bac千克round: #ccc;} .posdiv{width: 300px;height: 250px;background: #fff;position: relative; margin:0 auto} .posdiv img{width: 100px;position: absolute;top: 50%;margin-top: -50px;}
诠释:
1、一张包裹在div中的img图片,咱们给不但给图片以及div元素界说了尺寸,还给div元素界说了#fff的布风光(布景色采或是遵循需求设置装备摆设)。
2、给img的父元素增长相对定位属性(position: relative),同时,要给子元素也等于图片img元素增多绝对定位属性(position: absolute)。
3、将图片元素的top属性设置装备摆设为50%。
4、那时咱们需求给img元素设置装备摆设一个负的margin-top值,这个值为你想要实现垂直居中的元素高度的一半,*假如不注定元素的高度,也许不运用margin-top,而是应用transform:translateY(-50%);属性。
记取:若是你想要同时完成水准居中,那末你或者用实现垂直居中的同样的本领来完成。
感谢你能够认真阅读完这篇文章,希望小编分享的“web中怎么用绝对定位实现垂直居中”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图