Центрирование широкого div внутри более тонкой маски div

Я пытаюсь центрировать широкий div внутри меньшего и центрировать его. Это можно сделать?Центрирование широкого div внутри более тонкой маски div

Я получил это:

HTML

<body> 
<div id="full_container"> 
<div id="machine_mask"> 
<div id="machine_container"> 
<!---- SOME CONTENT HERE ---> 
</div> 
</div> 
<div class="machine_footer"> 
<img src="sprites/base_maquina.png" alt="panel de control" /> 
</div> 
</div> 
</body>

CSS

body { 
    margin :0; 
} 
div#full_container { 
    width: 100%; 
    height: 100%; 
    background: #805080; 
} 
div#machine_mask { 
    margin-top: 30px; 
    width: 100%; 
    display: inline-block; 
    height: 600px; 
    background: #805080; 
    position: relative; 
    overflow: hidden; 
} 
div#machine_container { 
    width: 1230px; 
    height: 500px; 
    background: #805080; 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    overflow: hidden; 
}

Когда окно шире, чем 1230px, это центры, но мне действительно нужно для того, чтобы быть в центре когда окно меньше ...

Есть ли способ сделать это? (Я думал об использовании jQuery и перепозиции его, но я бы предпочел сделать это в css)

Большое спасибо!

источник

2013-07-25 Sebi Sanchez

Вы можете использовать абсолютный позиционный хак.

div#machine_container { 
    width: 1230px; 
    height: 500px; 
    background: #805080; 
    position: absolute; 
    left: 50%; 
    margin-left: -615px; //half of 1230px 
    overflow: hidden; 
}

источник

2013-07-25 23:38:36 Chad

Большое спасибо! Я не мог прокомментировать это, когда вы его разместили, но это помогло мне надолго! –

Это похоже на 100 лет, но я нашел лучшее решение для контента с динамической высотой или шириной: top: 50%, left: 50%; transform (translate (-50%, - 50%)); –

@SebiSanchez хорошо да. Это было 3 с половиной года назад: P flexbox было бы лучшим решением. – Chad

Центрирование широкого div внутри более тонкой маски div

ответ

Смежные вопросы