Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Блок посередине экрана css

Поддержи проект!!! smile

Как расположить блок посередине страницы. Иногда требуется расположить блок посередине страницы – как это сделать!?

Мы уже как-то говорили на тему- как расположить блок div по центру, по горизонтали

Но теперь нам нужно, чтобы блок располагался и посередине по вертикали!

В качестве примера расположения блока посередине, по горизонтали и по вертикали рассмотрим уже ранее созданную страницу.

Как расположить блок посередине с помощью css.

Все просто!

Создаем див, которому приклеиваем какой-то класс…

<div class="main_dw_login"></div>

Далее пропишем свойства для данного блока!

Я специально привожу полный список стилей, чтобы вы понимали, как это работает!

Все, что расположено внутри «border» - это внешние края того блока с классом «main_dw_login».

Внутрь него вы можете помещать любые свои блоки, они будут уже позиционироваться относительно этого бордюра.

Ну естественно что высоту(height) и ширину(width) вы можете устанавливать свою.

Почему здесь ширина и высота не имеет привязку к сдвигу – за это отвечает transform: translate(-50%,-50%); (Если вы не в курсе, то любой блок, который вы собираетесь позиционировать - будет позиционироваться относительно его левого верхнего угла…)

.main_dw_login {

position: absolute;

top: 50%;

left: 50%;

width: 400px;

height: 300px;

transform: translate(-50%,-50%);

border: 1px solid #2d2e2f;

}


Вас может еще заинтересовать список тем : #HTML |
Последняя дата редактирования : 2020-01-24 04:16
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
блок посередине css блок посередине экрана

Последние комментарии :
Марат :
03/12/2020 08:47
Давно пользуюсь данным скриптом, который написал еще при царе горохе!За десять лет изменилось то, что и при…
подробнее.
Ольга Попова :
02/12/2020 11:42
Я уж было обрадовалась, а у меня не…
подробнее.
Марат :
23/11/2020 07:38
Приходите ещё!
подробнее.
Лило :
23/11/2020 06:34
Благодарю, удобно
подробнее.
Марат :
15/11/2020 01:57
Здесь отвечал...1) Есть вот комментарии от вконтактае, очень простые 2)Такое же есть от мордокниги, 3) смотрите…
подробнее.