Блок посередине экрана css
Как расположить блок посередине страницы. Иногда требуется расположить блок посередине страницы – как это сделать!?
Мы уже как-то говорили на тему- как расположить блок div по центру, по горизонталиНо теперь нам нужно, чтобы блок располагался и посередине по вертикали!
В качестве примера расположения блока посередине, по горизонтали и по вертикали рассмотрим уже ранее созданную страницу.Как расположить блок посередине с помощью css.
Все просто!
Создаем див, которому приклеиваем какой-то класс…
Далее пропишем свойства для данного блока!
Я специально привожу полный список стилей, чтобы вы понимали, как это работает!
Все, что расположено внутри «border» - это внешние края того блока с классом «main_dw_login».
Внутрь него вы можете помещать любые свои блоки, они будут уже позиционироваться относительно этого бордюра.
Ну естественно что высоту(height) и ширину(width) вы можете устанавливать свою.
Почему здесь ширина и высота не имеет привязку к сдвигу – за это отвечает.main_dw_login {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 300px;
transform: translate(-50%,-50%);
border: 1px solid #2d2e2f;
}
блок посередине css блок посередине экрана