admin管理员组

文章数量:1613632

用 position 实现上下左右居中

		<div class="father">
            <div class = "child1"></div>
        </div>

	.father {
                border: 10px solid black;
                overflow: hidden;
                height: 500px;
            }
    .child1 {
                width: 100px;
                height: 100px;
                padding: 10px;
                background-color: blanchedalmond;
            }

上面的代码显示图如下

给 child1 子盒子添加相对定位如下

	.child1 {
                width: 100px;
                height: 100px;
                padding: 10px;
                background-color: blanchedalmond;
                
                //添加定位
                left: 50%;
                top: 50%;
                position: relative;
                margin-left: -50px;
                margin-top: -50px;
                  
            }

实现上下左右居中如下

下面是截取添加定位的部分
1、设置相对定位
2、使得相对定位的左边界和上边界在浏览器的中间，也就是 50%，此时相当于边界线位于上下左右居中
3、让盒子向左边和向上面移动盒子的一半大小，也就是 50px

本文标签： 上下左右Position

版权声明：本文标题：用 position 实现上下左右居中 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1728603969a1165216.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。