CSS calc函数不居中[重复]答案

【问题标题】：CSS calc function does not center [duplicate]CSS calc函数不居中[重复]
【发布时间】：2020-01-15 06:25:24
【问题描述】：

我需要使用 calc 函数来计算宽度，但它不会分割周围的距离。

HTML

<div class="container-card">
    <div class="container-holder"></div>
</div>

SCSS

.container-card {
    background-color: grey;
    height: 500px;
    .container-holder {
        background-color: gold;
        width: calc(100% - 14px);
        height: 300px;
    }
}

这是一个例子：

https://jsfiddle.net/fze3L0w8/

换句话说：我需要在每个宽度上左右各有 14px 的距离。

【问题讨论】：

您需要将.container-holder 居中吗？更具体。
你需要使用 margin 或 display flex 属性来对齐 div 内的项目 w3.org/Style/Examples/007/center.en.html

标签： html css scss-mixins

【解决方案1】：

您可以使用margin:auto; 从两侧添加空间。而且你需要设置100% - 28px

.container-card {
    background-color: grey;
    height: 500px;
   
  }
   .container-holder {
      background-color: gold;
      width: calc(100% - 28px);
      height: 300px;
      margin: auto;
    }

<div class="container-card">
    <div class="container-holder">

    </div>
  </div>

【讨论】：

margin 单独起作用，为什么要使用 calc？
#heliya rb 因为我们只需要总宽度的 28px。所以，我们正在计算使用。
如果我们使用边距 14px 左右总是设置 28px 宽度。这不是真的吗？
#heliya rb 是的，这是真的。如果您在未定义宽度的情况下设置边距 14px，它将从两侧占用相等的空间。
#heliya rb 在这种情况下，当您不设置属性时，浏览器将调整为自动。

【解决方案2】：

只需设置 14px 的边距，您将不再需要设置 width 属性：

.container-card {
    background-color: grey;
    height: 500px;
    .container-holder {
      background-color: gold;
      margin: 14px;
      height: 300px;
    }
}

这是更新后的fiddle。

【讨论】：

那么我什么时候应该使用 calc？
谨慎，因为它会影响性能。这种情况在没有calc() 的情况下很容易解决：div 是块级元素；它已经具有 100% 的默认宽度，您可以对其应用边距。无需任何计算。

【解决方案3】：

这是解决方案：

background-color: gold;
width: calc(100% - 28px);
height: 300px;
margin: auto;

你也需要左右边距

【讨论】：

【解决方案4】：

您可以将其设置为100% - 28px 以将宽度减小14px right 和 left 并将margin: auto; 设置为使 div 居中

.container-card {
    background-color: grey;
    height: 500px;
    .container-holder {
      background-color: gold;
      width: calc(100% - 28px);
      margin: auto;
      height: 300px;
    }
  }

或者只设置margin:0px 14px;，不需要设置宽度，它会占用父宽度 - 边距

  .container-card {
        background-color: grey;
        height: 500px;
        .container-holder {
          background-color: gold;
          margin: 0px 14px;
          height: 300px;
        }
      }

【讨论】：

margin 单独起作用，为什么要使用 calc？
@heliyarb 检查更新的解决方案

【解决方案5】：

更优雅的解决方案是 -

.container-card {
    background-color: grey;
    height: 500px;
    .container-holder {
      background-color: gold;
      width: calc(100% - 28px);
      height: 300px;
      margin: 0 auto;
    }
  }

Calc 函数将获得 28px 并将一个元素居中于另一个元素中。使用margin: 0 auto;

【讨论】：

【解决方案6】：

只需将容器居中而不是使用 flex 之类的硬编码易碎方法，然后您可以使用任何您想要的边距而不会破坏它。

.container-card {
  display: flex;
  justify-content: center;
  background-color: grey;
  height: 500px;
}
.container-holder {
  background-color: gold;
  margin: 0 14px;
  width: 100%;
  height: 300px;
}

 <div class="container-card">
    <div class="container-holder">

    </div>
  </div>

【讨论】：

请查看stackoverflow.com/questions/59747337/…。我需要帮助

【解决方案7】：

更优雅的解决方案可能是这样 `

.container-card {
    background-color: grey;
    height: 500px;
    .container-holder {
      background-color: gold;
      margin-left: 14px;
      margin-right:14px;
      height: 300px;
    }
  }

`

【讨论】：