Центр перетекания элемент о его контейнере

Question

у меня есть:

<div> 
    <iframe></iframe> 
</div> 


div { 
    width: 100%; 
    height: 400px; 
    overflow: hidden; 
} 
iframe { 
    width: 940px; 
    height: 400px; 
    margin: 0 auto; 
    display: block; 
} 

Функция Iframe будет переполнение DIV, ведущее к «пропущенному разделу» справа. Мне нужен Iframe с центром, чтобы этот «недостающий раздел» был одинаковым с обеих сторон. Margin: 0 auto, похоже, не режет.

(The IFrame этом видео, чтобы поместить это в контекст)

Answer 1

Что об использовании отрицательного запаса (как половина фрейма ширина) следующим образом:

iframe { 
    width: 940px; 
    height: 400px; 
    margin-left: -470px /* <-- 940px/2 */ 
} 

Или с помощью position: relative; с left: -470px;.

margin: 0 auto не будет работать для ребенка, который шире своего родителя. Даже если вы измените свойство display на block.

От Spec(10.3.3 на уровне блоков, незамещаемые элементы в нормальном потоке):

, если это не widthauto и border-left-width + padding-left + width + padding-right + border-right-width (плюс любой из margin-left или margin-right, которые не являются auto) больше, чем ширина содержащего блока, то любые auto значения для margin-left или margin-right являются, по следующим правилам, обрабатывали, как нулевой.

Если CSS3 вариант, вы можете установить положение свойство для iframe включая отрицательное translateX держать центр элемента, когда родитель изменяет размер:

iframe { 
    width: 940px; 
    height: 300px; 
    background-color: orange; 

    position: relative; 
    left: 50%; 
    transform: translateX(-50%); 
} 

WORKING DEMO

Для старых браузеров, которые не поддерживают CSS3 transform, вы будете необходимо добавить дополнительный элемент в качестве обертки.

В таком подходе ребенка (iframe в вашем случае) оборачивают другой элемент называется .wrapper следующим образом:

<div class="parent"> 
    <div class="wrapper"> 
    <div class="child"></div> 
    </div> 
</div> 

.parent { 
    width: 100%; 
    height: 400px; 
    overflow: hidden; 
    position: relative; 
} 

.wrapper { 
    position: absolute; 
    left: 50%; 
} 

.child { 
    width: 940px; 
    height: 300px; 
    position: relative; 
    left: -50%; 
} 

UPDATED DEMO.

Answer 2

Iframe - это встроенный элемент. Добавить display: block;, чтобы margin: 0 auto; работы.