Как центрировать элемент шире, чем его родительский элемент?

Question

В настоящее время у меня есть div с фиксированной шириной 900px.
Я хотел бы добавить дочерний iframe с фиксированной шириной 950px, и я бы хотел, чтобы он был идеально выровнен по центру.
Как это можно сделать?

Спасибо.

Answer 1

Вы можете установить дочерний элемент на 50%, а затем использовать отрицательное поле, равное половине ширины дочернего элемента:

.parent { position: relative; overflow: hidden; }
.child { position: absolute; left: 50%; top: 0; margin-left: -475px; }

Таким образом, вам нужно знать только размер дочернего элемента.

Answer 2

Я нашел способ сделать это с динамической шириной здесь: http://www.greywyvern.com/?post=323

Answer 3

Другой способ будет использовать:

   .parent {
     position:relative;
   }
   .child {
     position:absolute;
     left:50%;
     transform:translateX(-50%);
   }

, который работает, даже если вы не знаете размер дочернего или родительского элемента, но не будет работать в старых браузерах.

Answer 4

Я предполагаю, что ширина вашего внешнего контейнера равна 950px, а ширина дочернего iframe равна 900px, тогда вы можете использовать margin: 0px auto;для вашего детского контейнера в css

Answer 5

.container {
    width:900px
}

iframe {
    margin-left:-25px;
    width:950px;
}