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

Posted 2023-03-29

【中文标题】使用变换转换的中心元素（具有 50px 边距）

【英文标题】：center element(with 50px margin) using transform translate

【发布时间】：2021-05-04 18:25:03

【问题描述】：

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

我有一个边距为 50px 的 @mixin 主题 btn

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

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

【问题讨论】：

有点奇怪的定位。你能分享你的html和css代码吗？

您需要决定 (1) 是否将元素居中（边距无关紧要） (2) 应用边距（中心不相关）。两者兼有是矛盾的

transform:translateX(calc(-50% - 50px));

【参考方案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;