@Denis_1334

Почему при свойстве margin: 50% страница увеличивает высоту в 2 раза?

Почему при свойстве margin: 50% страница увеличивает высоту в 2 раза и блок встаёт по середине внизу?

Как сделать, чтобы страница не увеличивалась, и он встал в центре страницы?

Код:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="popup">
	       <p>Hello</p>
	       <p>World</p>
        </div>
</body>
</html>


.popup {
 	background: green;
 	width: 100px;
 	height: 100px;
 	margin: 50% 50%;
 	transform: translate(-50%, -50%);
 }
  • Вопрос задан
  • 82 просмотра
Пригласить эксперта
Ответы на вопрос 4
develx
@develx
Web developer
margin: 50%; - 50% от ширины родительского блока (в данном случае body) https://developer.mozilla.org/ru/docs/Web/CSS/margin


https://codepen.io/xdevelx/pen/yLNKQgv
Ответ написан
natojezlo
@natojezlo
обычно popup выводится абсолютным позиционированием
Ответ написан
@NedoProgrammist1979
Чувак поставь margin: 50%; -50% и усё
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы