CSS 实现 grid 布局中 div 在表格里的居中效果

<template>
    <!--底部组件-->
    <div class="bottom">
        <div class="left">
            <div class="close"></div>
        </div>
        <div class="right" > 4 / 12</div>
    </div>
</template>

<style scoped lang="less">
    .bottom {
        height: 1.45rem;
        display: grid;
        grid-template-columns: 1.5rem 17.37rem;
        grid-template-rows: 1.25rem;
        grid-column-gap: 0.33rem;
        div {
            font-size: 0.2rem;
            color: #000000;
        }
        .left {
            background: rgba(255,203,70,0.2);
            border-radius: 0 0.7rem 0.7rem 0;
            .close {
                background-image: url('./assets/close.png');
                background-size: 100%;
                background-repeat: no-repeat;
                width: 0.5rem;
                height: 0.5rem;
                position: relative;
                top: 50%;
                left: 0.6rem;
                transform: translateY(-50%);
            }
        }
        .right {
            background: rgba(255,203,70,0.2);
            border-radius: 0 0.7rem 0.7rem 0;
        }
    }
	
</style>