css - 使用变换转换的中心元素（具有 50px 边距）

Question

我有一个绝对定位的元素，边距为 50px，因此在设置左侧 50% 和变换转换 (-50%) 元素后，由于边距而不是中心。是否有水平选项中心元素并保持边距 50px 并转换平移 (-50%)

我有一个边距为 50px 的 @mixin theme-btn

.btn{
   @include theme-btn();
   &--uslugi{

    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

}

标签： cssmargincenter

Answer 1

将父 div 添加到您的 div，例如：

HTML

<div class="box">
    <div class="box-in">
        
    </div>
</div>

和 CSS

.box {
    display: flex;
    justify-content: center;
}

.box-in {
    margin: 50px;
    height: 100px;
    width: 400px;
    border: 1px solid green;
}