一、问题或解决方法应用场景。
在前端画页面的时候经常要求某个图片居中显示在某个区域中， 这里提供一下方法。
重点：子绝对定位， 父级相对定位。
通过对父级元素的百分比定位的设置， 然后对子级的margin设定为负自己宽度（高度）的一半，从而实现居中显示的效果。
二、直接粘贴代码来说明吧
style{
div {
width: 400px;
height: 100px;
background: skyblue;
margin: 100px auto;
position: relative;
}
div p {
width: 100px;
height: 100px;
background-color: gold;
position: absolute;
left: 50%;
margin-left: -50px;
}
}
<body>
<div>
<p></p>
</div>
</body>
三、注意事项，着重注意点。
1.left 设置为50%；
2.margin：设置为自身宽度的负的一半（-50px）
持续更新中、、、、、、本人代码新手，能力有限，如有不足之处，欢迎大家一起讨论交流。
扫一扫
3371
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
