用 position 实现上下左右居中

用 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