使用display:flex时垂直水平居中不准确
发布于 6 年前 作者 mtang 3732 次浏览 来自 问答

用‘px’做单位时

css

.checkout-all {

width:24px;

height:24px;

border:1px solid #e5e5e5;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

}

.checkout-spot {

width:12px;

height:12px;

background:#2d9aff;

border-radius:50%;

}

html

<view class="checkout-all checkout-spot">
<view class="checkout-spot"></view>
</view>

用rpx做单位时

css

.checkout-all{
width: 46rpx;
height: 46rpx;
border: 1px solid #e5e5e5;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
.checkout-spot{
width: 24rpx;
height: 24rpx;
background: #2d9aff;
border-radius: 50%;

}
}

问题:用rpx做单位时,是不是感觉有点没居中

回到顶部