flex 设置上下都居中 <div class="btn-not-sel"><span>零售用户</span></div>

可以使用flex布局的align-items属性和justify-content属性来实现上下居中和左右居中。

具体方法如下：
1.将父元素的display属性设置为flex。
2.使用align-items属性来设置子元素在交叉轴上的对齐方式，可以将其设置为center。
3.使用justify-content属性来设置子元素在主轴上的对齐方式，可以将其设置为center。

示例代码如下：

<style>
    .btn-not-sel{
        display:flex;
        align-items:center;
        justify-content:center;
        height:100px;
    }
</style>

<div class="btn-not-sel">
    <span>零售用户</span>
</div>

相关问题

// 以下代码实现全选多选反选取消选择 <div class="box"> <div class="list"> <div class="list-head"> <div class="check-box"> <el-checkbox v-model="checkAll">全选该页</el-checkbox> </div> <div class="title"> 需审核共<span class="red">15篇</span>内容 </div> <div class="list-btn"> <el-button size="medium" class="seachBtn">批量通过</el-button> </div> </div> <div class="list-box"> <div class="cell"> <div class="list-box-check"> <el-checkbox></el-checkbox> </div> <div class="text"> <div class="name">ZCH3021 财联社3月1日早报（周三）</div> <div class="p"> <div class="reason"> <span>过滤原因</span> <span>高敏感</span> </div> <div class="warehousing-time"> <span>入库时间</span> <span>2023-04-10 16:25:50</span> </div> </div> </div> </div> <div class="cell"> <div class="list-box-check"> <el-checkbox></el-checkbox> </div> <div class="text"> <div class="name">ZCH3021 财联社3月1日早报（周三）</div> <div class="p"> <div class="reason"> <span>过滤原因</span> <span>高敏感</span> </div> <div class="warehousing-time"> <span>入库时间</span> <span>2023-04-10 16:25:50</span> </div> </div> </div> </div> </div> </div> <div class="content"> </div> </div>

这段代码是用来实现一个列表的选择功能的。其中包括全选、多选、反选和取消选择四种操作。具体实现方式是通过使用element-ui库提供的el-checkbox组件来实现选择框，并通过绑定v-model实现选中状态的同步。同时，在列表头部还提供了一个全选该页的复选框，通过绑定checkAll变量实现全选和取消全选功能。在批量操作时，可以通过获取选中的列表项来进行批量处理。

美化界面 <!-- 商品信息内容 --> <div class="container" > <div class="left"> <div class="actor"> <img width="30%" :src="$route.query.img | fmtImg" > </div> </div> <div class="right"> <h2> {{ $route.query.name }}</h2> <div class="banner-price"> <p class="params-item"><span class="params-label">价格</span> <span class="price-delete">{{$route.query.price}}</span> </p> <p><span class="params-label">促销价</span> <span class="price-strong">{{$route.query.onlineprice}}</span></p> </div> <div class="banner-params"> <p class="params-item"><span class="params-label">发货地</span>上海</p> <p class="params-item"><span class="params-label">快递方式</span>顺丰包邮</p> </div> <div class="banner-quantity"><input type="number" min="1" class="ipt-quantity"></div> <div class="banner-operate"><span class="btn-operate btn btn-dark"> 立即购买 </span> <span @click="addCart($route.query.id)" class="btn-operate btn btn-dark"> 加入购物车 </span></div> <br> <div class="banner-state"> <p class="params-item"><span class="params-label">服务承诺</span> <span class="params-label deep-gray">正品保证</span> <span class="params-label deep-gray">极速退款</span> <span class="params-label deep-gray">赠运费险</span> <span class="params-label deep-gray">七天无理由退换</span> </p> </div> </div> </div> </div>

这是一个 HTML 代码片段，用于展示商品信息的页面。其中包括商品的图片、名称、价格、促销价、发货地、快递方式、购买数量选择、立即购买和加入购物车等按钮，以及商品的服务承诺。此外，还有一些样式类，如 container、left、right、actor、banner-price、params-item、params-label、price-delete、price-strong、banner-params、banner-quantity、banner-operate 和 banner-state 等，用于美化页面的展示效果。