css实用技巧——绝对定位元素的水平垂直居中

方法一

原理：将left right top bottom都设置为0，使绝对定位相对整个页面定位，同时margin为auto，完成上下左右外边距等分 ，最终实现绝对定位元素的水平垂直居中

<template>
    <div class="box center">
    </div>
</template>
<style scoped>
    .box {
        width: 100px;
        height: 100px;
        background: red;
    }

    .center {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
</style>

方法二

原理：设置left,top值均为50%,同时margin-left设置为绝对定位元素width的一半取负,margin-top设为其height的一半取负。

<template>
    <div class="box center">
    </div>
</template>
<style scoped>
    .box {
        width: 100px;
        height: 100px;
        background: red;
    }

    .center {
        position: absolute;
        left: 50%;
        margin-left: -50px;
        top: 50%;
        margin-top: -50px;
    }
</style>