首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

HTML盒子水平垂直居中

以前我们使定位的盒子水平/垂直居中可能是这样的 .father{ width:300px; height:200px; border...left:50%; margin-left: -35px; } 父元素设置相对定位,子元素绝对定位,左边父元素的50% 效果如下 图片...这是由于子盒子自身宽度的原因,我们只需使子盒子在向左移动自身宽度的一半,即可实现水平居中 因此我们可能会这样做 margin-left: -35px; 子盒子原宽度70px 向左移动自身宽度的一半确实能解决问题 图片...x,y)如果单位为像素,则相对于父元素移动,如果单位为百分比则相对于自身移动 有了这个特性我们这里就很好解决了,将原来的margin-left替换为transform:translateX(%)即可 垂直居中同理...left:50%; /*margin-left: 20%;*/ transform: translateX(-50%); } 图片

3.4K10
您找到你想要的搜索结果了吗?
是的
没有找到

实现div里的img图片水平垂直居中

方法一: 将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置...将div设置成相对定位relative,将img设置成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于div的中心,要是图片的中心位于div的中心,就需要将图片向上移动图片高度的一半...,并向左移动图片宽度的一半。...将div设置成相对定位relative,将img设置成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于div的中心,要是图片的中心位于div的中心,就需要将图片向上移动图片高度的一半...发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/137482.html原文链接:https://javaforall.cn

2.9K20
领券