CSS calc() процентное разделение разделения поколений

Question

эй там можно рассчитать это на css?

100% - 650px/2 * 100/100%

У меня есть DIV contaniner, которые растут с окном изменения размера так в этом контейнере я есть IFRAME, что максимальная ширина должна быть 650px и я хочу его поддерживать выровненный в центре контейнера, используйте левую по этой причине я использую/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%) Я не знаю 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 в любом месте, вы выиграли 't нужно calc вообще при использовании flexbox, но это может занять некоторое время, чтобы привыкнуть.