html - CSS calc函数未居中

This question already has answers here:

How to horizontally center a <div>?
                                
                                    （104个答案）
                                
                        
                                7天前关闭。
            
                    
我需要对宽度使用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的距离。

最佳答案

您可以使用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>