Резиновый DIV чётко по центру

Question

[Суфикс Суфиксович]

Господа, подскажите пожалуйста.

У меня совсем детский вопрос, но решения на него я не нашёл.

Нужно резиновый DIV поместить чётко по центру (вертикали и горизонтали).

min-width: 900px;
max-width: 1280px;
height: 500px.

Как фиксированный DIV — поместить я знаю, а вот с резиновой вёрсткой — не хватает опыта.

Answer 1

[Назар Мокринский]

Так пробовали?

margin: 0 auto;

Comments

[Назар Мокринский]

Точнее так:

top: 50%;
margin: -250px auto 0 auto;

[Суфикс Суфиксович]

А поточнее можете написать?
Отдельным классом.

margin: 0 auto; — ну разумеется по горизонтали это работает. А вертикаль?

[Назар Мокринский]

jsfiddle.net/vzhn2/

Первый вариант — да, только по горизонтали, просто не дочитал.

Answer 2

[PaulZi]

Для выравнивания по вертикали нужно либо выставить у родительского элемента display: table-cell и vertical-align: middle, не будет правда работать в ie7. Второй вариант — использовать line-height: 100% у дополнительного мест минского э элемента, и обоим им ввыставить vertical-align middle.
Извиняюсь, что описываю текстом — с телефона пишу.

Comments

[PaulZi]

Вот накидал то, что описывал:
jsfiddle.net/szPMD/

Answer 3

[Руслан Баночкин]

Есть ещё вот такое решение, с помощью Flexbox: blog.sk8er.name/rabota/vyravnivanie-bloka-po-centru

Answer 4

[Moor]

Вот здесь годное, суровое решение.

Answer 5

[brruht]

Поместить блок в еще один блок у которого есть определенные размеры. И выровнять по центру родительский блок. Полностью резиновый блок будет занимать все доступное пространство, а так его ограничивает родительский блок. В родительском блоке по-моему можно размеры в процентах задавать или ограничивать максимальным значением типа max-width. Тогда он будет уменьшаться в след за вставляемым блоком, но доходя до определенного размера будет переставать расти.

CSS
.wrap {
margin: 0 auto;
max-width: 560px;
max-height: 320px;
}

.thumb-wrap {
position: relative;
padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */
padding-top: 30px;
height: 0;
overflow: hidden;
}
.thumb-wrap iframe {
position: absolute;
top: 0;
left: 0;
width:100%;
height: 100%;
}

Код на примере вставки видео с ютуб

<div class="wrap">
<div class="thumb-wrap">
<iframe width="560"width="560" height="315" src="https://www.youtube.com/embed/C2i-9qTrPck" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>