Центрирующий блок div относительно этого центра

Я хочу установить геметрический центр моего блока div в геометрическом центре экрана. Как я могу это сделать? ИмеемЦентрирующий блок div относительно этого центра

<div style="position: absolute; width: 240px; height: 150px; margin:50%; > 
    some content 
</div>

Но это не сработает. Я не знаю, почему это не так. margin:50% эквивалент margin-top/left/right/bottom: 50%. Таким образом, у нас есть дополнительное пространство для нашего элемента div как 50% линейного размера экрана. Почему необходимо явно определять width и height, если мы используем атрибут margin или top/left/right/bottom?

источник

2013-12-04 Anonymous

Мы можем использовать следующее:

<div style="position: absolute; margin: auto; width: 240px; height: 150px; top: 0; left: 0; bottom: 0; right: 0;"> 
    some content 
</div>

источник

2013-12-04 12:01:09

Используйте нижеследующее, чтобы сделать его централизованным.

НАПРИМЕР,

<div style="display: table; margin: 0px auto;"> 
    <div style="margin: 0px auto; text-align: center; background: none repeat scroll 0% 0% gray; width: 240px; height: 150px; display: table-cell; vertical-align: middle;"> 
     some content 
    </div> 
</div>

WORKING DEMO

Надеется, что это помогает.

источник

2013-12-04 11:36:47 Nitesh

Спасибо за ваш ответ! Но это только горизонтальное выравнивание. Мне нужно вертикальное выравнивание. –

Добавлено в мой ответ выше. Надеюсь это поможет. – Nitesh

Далее отредактировал код. http://jsfiddle.net/n2Ctw/1/ - @DmitryFucintv – Nitesh

Здесь мы идем. HTML:

<body> 
    <div class="centered">Hello</div> 
</body>

CSS:

.centered { 
    position: absolute; 
    width: 240px; 
    height: 150px; 
    /* positioning the element (top/left corner) at the center */ 
    top: 50%; 
    left: 50%; 
    /* moving the element's center to the screen's center (compensating relatively to the dimensions) */ 
    margin-top: -75px; /* half of the height */ 
    margin-left: -120px; /* half of the width */ 
}

margin: 50% не будет работать из-за элементов с position: absolute потерять ссылку на размеры родителя. Это одна из проблем макета с помощью CSS Box Model.

Однако, вы можете использовать Flexbox Layout модель, которая была бы много проще:

body { 
    display: flex; 
} 

.centered { 
    margin: auto; 
}

Вам просто нужно установить margin: auto и родительский элемент должен быть установлен как display: flex. Simple =)

источник

2013-12-04 12:49:19

Центрирующий блок div относительно этого центра

ответ

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