Question

嘿，有可能在css上计算这个吗？

100％ - 650px / 2 * 100/100％

我有一个与调整大小窗口一起成长的div contaniner所以在这个容器中我有一个iframe，最大宽度必须是650px，我想在容器的中心对齐，使用左边因为这个原因我使用/ 2确定左右空间的宽度我尝试使用它但不起作用：

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

任何帮助都会被贬低感谢

完整的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％）我不明白。但似乎你需要一个解决方案来完美地居中水平一个元素。这是最容易的：

 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有一个更简单的解决方案。

e.g。

＆＃13;

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

＆＃13;

background

＆＃13;

您希望明确移除padding属性和<iframe>上的calc，但这是前进之路。

此方法还允许您在整个布局模式中更加灵活，因为Flexbox支持许多其他功能，这些功能是前端人员等多年来想要的。

如需进一步阅读，我建议您阅读以下内容：

请注意，也无需在任何地方使用calc，在使用flexbox时根本不需要{{1}}，但可能需要一些时间才能习惯。

CSS calc（）百分比rest division multiplication

2 个答案: