css定位元素居中

今天发现一种定位元素的居中方式，给大家分享一下

我想让一个元素在父组件里面实现水平居中，且与底部有间距，使用万能的margin 0 auto发现没用，然后我又想到了第二种方式，

 .box3{
            width: 200px;
            height: 200px;
            position: absolute;
            top: calc(50% - 60px);
            left: calc(50% - 100px);
            background-color: red;
        }

使用定位元素，百分比再减去自己的一半，可以实现居中且调整下间距，正在我以为就结束的时候，我发现我要居中的组件不是一个固定的宽度，是自适应的宽度，calc里面不能用了，我陷入了沉思....

然后我有尝试了第三种方案：

 .box3{
            width: 50%;
            height: 50%;
            position: absolute;
            top:0;
            bottom:0;
            left:0;
            right:0;
            margin: auto;
            background-color: red;
        }

这样虽然可以居中水平，但是我不想竖直方向也居中，而是靠下有一定的间距。

经过了一番尝试之后，我发现可以区掉top属性，给bottom赋值，就可以实现水平的居中，竖直任意位置了，去掉top后，竖直方向就不会收到amrgin:auto的影响了，得到以下结果：

.box3{
            width: 50%;
            height: 50%;
            position: absolute;
            bottom:10px;
            left:0;
            right:0;
            margin: auto;
            background-color: red;
        }

 这个方法非常好用，比其他的用起来更舒适，大佬请划走......