中心元素（有 50px 边距）使用 transform translate

Question

我有一个绝对定位的元素，边距为 50px，所以在设置左 50% 和转换平移 (-50%) 元素后，由于边距，元素不在中心。是否有水平居中元素并保持 margin 50px 和 transform translate (-50%)

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

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

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

}

Answer 1

将 parent 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;
}

中心元素（有 50px 边距）使用 transform translate

center element(with 50px margin) using transform translate

css

margin

center