CSS calc（）百分比余数乘除法

Question

嘿那里它是可行的，以计算这在CSS？

100％ - 650像素/ 2 * 100/100％

我有一个div contaniner与调整窗口大小长得那么在该容器中，我有一个iframe是最大宽度必须是650像素，我想十个分量对齐在容器的中心，使用左侧为此，我用/ 2来确定的左侧宽度和右侧上的空间，我尝试使用这个，但不起作用：

left: calc(((100% - 650px)/2) * (100/100%)); 

任何帮助将apreciated
谢谢

完整的CSS代码：

#video_externo { 
       background: #222222; 
       text-align: center; 
       width: $c; 
       position: relative; 
       padding-bottom: 56.25%; /* 16:9 */ 
       padding-top: 25px; 
       height: 0; 
       iframe, 
       video, 
       object, 
       embed { 
        position: absolute; 
        top: 0; 
        left: 0; 
        height: 100%; 
        max-height: 400px; 
        width: 100%; 
        max-width: 650px; 
        border: 0; 
        @media (min-width: 768px) { 
         left: calc((100% - 650px/2 * 100)/100%); 
        } 
        @media (min-width: 1024px) { 
         left: 0.7575757575757576%; 
        } 
        @media (min-width: 1200px) { 
         left: 9.375%; 
         top: 7.894736842105263%; 
        } 
        @media (min-width:1500px){ 
         left: 20.72072072072072%; 
         top: 19.20115495668912%; 
        } 
       } 
      } 

解决工作CSS：

#video_externo { 
       background: #222222; 
       text-align: center; 
       width: $c; 
       position: relative; 
       padding-bottom: 56.25%; /* 16:9 */ 
       padding-top: 25px; 
       height: 0; 
       iframe, 
       video, 
       object, 
       embed { 
        position: absolute; 
        top: 0; 
        left: 0; 
        height: 100%; 
        max-height: 400px; 
        width: 100%; 
        max-width: 650px; 
        border: 0; 
        @media (min-width: 768px) { 
         left: 50%; 
         transform: translateX(-50%); 
        } 
        @media (min-width: 1200px) { 
         top: 7.894736842105263%; 
        } 
        @media (min-width:1500px){ 
         top: 19.20115495668912%; 
        } 
       } 
      } 

替代解决方案随着Flexbox的：

#video_externo { 
       width: 100%; 
       display: flex; 
       justify-content: center; 
       background: #222; 
       position: relative; 
       padding-bottom: 56.25%; /* 16:9 */ 
       padding-top: 25px; 
       height: 0; 
       iframe { 
        position: absolute; 
        width: 100%; 
        max-width: 650px; 
        height: 100%; 
        max-height: 400px; 
        top: 0; 
        left: 50%; 
        transform: translateX(-50%); 
       } 
      } 

只是有与顶级的烦恼：我认为是填充到部队显示16：9视频

Answer 1

这个计算似乎是错误的，几乎为（100 - 100％）我不und erstand。但似乎你需要一个完美的水平中心一个元素的解决方案。这是最简单的：

left: 50%; 
transform: translateX(-50%); 

这完全没有计算，没有预先知道元素的大小排列。你可以看到工作：

.border { width: 100%; height: 500px; position: relative; border: 1px solid black;} 
 
.center { width: 200px; height: 150px; background-color: #f00; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }

<div class="border"> 
 
    <div class="center"> 
 
    Centered 
 
    </div> 
 
</div>

Answer 2

有使用CSS Flexbox的一个更简单的解决方案。

例如

.container { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    background: #fff; 
 
} 
 

 
    .container > iframe { 
 
    width: 100%; 
 
    max-width: 650px; 
 
    /* just to show the element */ 
 
    background: #09c; 
 
    padding: 100px 0 
 
    }

<div class="container"> 
 
    <iframe></iframe> 
 
</div>

你想删除的background性能和对显然padding但这是前进的方向。

此方法还允许您在整个布局模式中灵活得多，因为flexbox支持许多前置放大器和类似设备多年来一直需要的其他功能。

进一步的阅读我建议你阅读以下内容：

• CSSTricks guide on flexbox
• Mozilla Developers Network flexbox docs
• Scotch guide on flexbox

注意，也没有必要使用calc的任何地方，你赢了使用flexbox时根本不需要calc，但需要一些时间才能习惯。