Центрирование div, который переполняет его родительский элемент в другом центрированном div

Question

У меня есть один столбец, где столбец представляет собой центрированный div с фиксированной шириной. Я хочу разместить более широкий div внутри столбца, который переполняет его родителей, но центрирует его внутри родителя. Концептуально что-то вроде следующего:

<div style="width: 100px; margin: 0 auto; overflow:visible;" id="parent"> 
    <div style="width: 400px; margin 0 auto;" id="child"></div> 
</div> 

Центрирование работает до тех пор, как ребенка DIV тоньше, чем его родитель, но как только он становится больше, она всегда выравнивает влево с родителем по некоторым причинам.

Answer 1

Я сделал jsFiddle solution

Когда элемент переполнения его родителя, это нормальное поведение, что она переливается только вправо. Когда у вас, например, есть сайт, который шире, чем область просмотра, вам никогда не придется прокручивать влево, но только вправо. Это решение основано на абсолютном центрированном div с отрицательным левым полем (это значение составляет половину его собственной ширины). Поэтому, если вы знаете ширину этого элемента, это решение должно быть прекрасным.

Испытано в FF 3.6, IE7 и IE8

Answer 2

Я не 100% уверен, но попробуйте дать родительский элемент позиции установлен в relative и детской absolute, а затем установить top, left и width/height свойства для ребенка соответственно деление с.

Answer 3

Я сделал a variation раствора Justus'. Вместо относительного позиционирования я использовал отрицательный запас в 50% во внутреннем элементе.

#wrapper { 
    margin: 0 auto; 
    padding: 10px 0 10px; 
    width: 200px; 
    background-color: #eee; 
} 
#child { 
    margin: 0 -50%; 
    width: 400px; 
    background-color: #ddd; 
} 

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

Answer 4

Это, как я решить:

http://jsfiddle.net/WPuhU/1/

также заботиться о скроллинга (они не появляются, если ваш вид окна меньше, чем в переполненном дел). Автоцентр переполняет div.

CSS:

#center-3 {height:40px;background-color: #999;} 
#center-1 {height:20px;top:10px;background-color: #aaa;} 

/* the necesary code */ 
body {width:100%;margin:0;} 
#center-4 { 
    width: 100%; 
    overflow:hidden; 
    /* remove the next 2 line for a normal flow */ 
    position: absolute; 
    z-index: -1; 
} 
#center-3 { 
    position: relative; 
    margin: 0 auto; 
    width: 200px; 
} 
#center-2, #center-1 { 
    position: relative; 
    width: 400px; 
} 
#center-2 { 
    left: 50%; 
} 
#center-1 { 
    left: -50%; 
} 

HTML:

<div id="center-4"> 
    <div id="center-3"> 
     <div id="center-2"> 
      <div id="center-1"></div> 
     </div> 
    </div> 
</div> 
<div id="other-stuff">Here comes the other stuff above.</div> 

Answer 5

#parent { 
    position: relative; 
    width: 100px; 
    overflow: visible; 
} 

#child { 
    width: 400px; 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
}