一、方案一(已知子元素的宽高)
1.子元素开启绝对定位,父元素开启相对定位
2.子元素设置left、right、top、bottom属性都为0,margin为auto
或者 (注意2、3步二选一)
3.子元素left设为50%,top设为50%,margin-left设为 -子元素的width/2px,margin-top设为 -子元素的height/2px
二、方案二(未知子元素宽高)
1.子元素开启绝对定位,父元素开启相对定位(这一步和方案一相同)
2.子元素left设为50%,top设为50%,transform设为translate(-50%,-50%)
特别说明:子元素开启了绝对定位,随之父元素也要开启非static定位(relative相对定位或者是absolute绝对定位都可以,根据需求),才能使子元素的绝对定位是相对于其父元素进行定位。
end,每种方案实现原理都不尽相同,望辩证待之。
如对本文有疑问, 点击进行留言回复!!
清除新版Google Chrome浏览器中表单控件(input,button...)默认的黑色边框
荐 20200714——git/mac配置/项目运行步骤/一些报错
antd 菜单组件 使用时报错:Cannot read property ‘isRootMenu‘ of undefined
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来
硬件仪表盘账号建立指导(一) --WHQL认证测试结果提交账号(一)
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系
网友评论