css 实用技巧 —— 永远居中的弹窗

<template>
    <div>
        <button @click="showDialog = true">打开弹窗</button>
        <div class="container" v-if="showDialog">
            <div class="dialog">永远居中的弹窗</div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                showDialog:false
            }
        },
    }
</script>
<style scoped>
    .container {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .5);
        text-align: center;
        font-size: 0;
        white-space: nowrap;
        overflow: auto;
        z-index: 999;
    }
 
    .container:after {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
 
    .dialog {
        display: inline-block;
        vertical-align: middle;
        text-align: left;
        font-size: 14px;
        white-space: normal;
        background: white;
        border-radius: 6px;
        padding: 20px;
        width: 40%;
        height: 30%;
    }
</style>