无法使用 margin:auto 在父 div 中居中 div

Question

我正在尝试在具有类“lc-product-buy-sm-wrap”，但无论我尝试什么，它都会向左移动一点，并且在调整窗口大小时不会移动。 为了可视化，我在我想要居中的 div 中将背景颜色设置为柚木，并为父 div 设置蓝色，它可以调整大小并按预期工作。

我也试过在 div 上设置 display:inline-block 和在父 div 上设置 text-align:center ，但没有成功。

HTML：

<div class="d-md-flex">
    <section>
        <div class="d-flex align-items-center lc-product-visual-wrap">
            <nav id="thumbNavPrevious" class="lc-product-img-nav-wrap"><i class="fa fa-arrow-circle-left fa-3x lc-product-img-nav-left" aria-hidden="true" title="@_sharedLocalizer["Previous"]"></i></nav>
            <div class="container">
                <div class="lc-product-graphic-outer-wrap">
                    <div class="lc-product-graphic-wrap"></div>
                </div>
            </div>
            <nav id="thumbNavNext" class="lc-product-img-nav-wrap"><i class="fa fa-arrow-circle-right fa-3x lc-product-img-nav-right" aria-hidden="true" title="@_sharedLocalizer["Next"]"></i></nav>
        </div>
        <div class="lc-product-current-count-wrap">
            <span class="lc-product-current-count"></span>
        </div>
        <div class="lc-product-buy-sm-wrap">
            @Html.Partial("/Views/Partials/BuySmall.cshtml", new BuySmallContextModel() { Product = Model, HandleGraphic = false })
        </div>
        <div class="d-none d-md-block lc-product-thumb-wrap" >
            <div class="d-inline-flex flex-wrap">
                @{
                    int i = 1;
                }
                @foreach (GraphicItem gfx in Model.Owner.GetGraphicItems(_helper.CurrentCulture.Id))
                {
                    string clss = i == 1 ? "lc-product-thumb-img lc-product-thumb-img-active" : "lc-product-thumb-img";
                    <lc:graphic item="gfx" class="@clss" id="@Html.Raw("thumb-" + @i)" />

                    i++;
                }
            </div>
        </div>
    </section>
    <section class="d-none d-md-block lc-product-content-wrap" style="width:100%;">
        <lc:bs-card>
            <lc:bs-card-header text="@Model.LocalizedName" />
            <lc:bs-card-description text="@Model.LocalizedDescription" />
        </lc:bs-card>
    </section>
</div>

BuySmall.cshtml 的一部分： ...

<div class="container lc-buy-sm-body-wrap">
    <div class="container lc-buy-sm-buy-wrap">
        <div class="container lc-buy-sm-buy-price-wrap">
            <h3 class="text-primary lc-buy-sm-buy-price">
                @Model.Product.PriceRoundedUpFormated
            </h3>
        </div>
        <div class="lc-buy-sm-buy-button-wrap">
            @Html.Partial("/Views/Partials/BuyButton.cshtml", new BuyButtonContextModel() { ButtonClass = "lc-buy-sm-buy-button", NumberClass = "lc-buy-sm-buy-textbox", SubMin = Model.Product.Owner.Min, SubMax = Model.Product.Owner.Max })
        </div>
    </div>
</div>

BuySmall.cshtml 的原始 less 文件：

.lc-buy-sm-body-wrap {
    min-width: 400px;
    max-width: 100%;
    position: relative;

    .lc-buy-sm-buy-wrap {
        position: absolute;
        width: 248px;
        top: -4px;
        left: 3px;

        .lc-buy-sm-buy-price-wrap {
            position: absolute;
            left: 0px;
            bottom: 0px;
            max-width: 100%;

            .lc-buy-sm-buy-price {
                position: absolute;
                left: 0px;
                display: table;
                padding: 4px;
                padding-left: 10px;
                padding-right: 10px;
                border: 4px solid @main-background-color;
                background-color: yellow;
                font-weight: bold;
                border-radius: 6px;
                min-width: 118px;
            }
        }

        .lc-buy-sm-buy-button-wrap {
            position: absolute;
            right: 0px;
            top: 6px;
            width: 102px;
        }
    }
}

被覆盖：

.lc-product-buy-sm-wrap {
    background-color: blue;
}

.lc-buy-sm-buy-wrap {
    position: relative !important;
    background-color: teal;
    height: 52px;
    top: unset !important;
    left: unset !important;
    margin: auto;

    .lc-buy-sm-buy-price-wrap {
        top: 0px !important;
    }

    .lc-buy-sm-buy-button-wrap {
        right: 0px !important;
    }
}

Answer 1

您可能希望以您的案例为例来看看这个

位置：绝对； 左：50%； 变换:翻译(-50%, 0);

将此css设置为您的子div并将您的父div设置为position: relative;

.parent{
    display: block;
    background: red;
    position: relative;
    width: 100%;
    height: 50px;
}

.child{
  display: block;
  background: yellow;
  position: absolute;
  left:50%;
  transform:translate(-50%, 0);
  width:100px;
  height:50px;
}

<div class="parent">
  <div class="child">
  </div>
</div>