Проблема в позиционировании <div>

147
14 октября 2018, 17:40

Каким образом можно расположить по центру страницы, не используя margin?

Answer 1

Можно так

body { 
  display: flex; 
  width: 100%; 
  height: 100%; 
  min-height: 100vh; 
  align-items: center; 
  justify-content: center; 
  padding: 0; 
  margin: 0; 
  background-color:tomato; 
} 
 
div { 
  width: 50px; 
  height: 50px; 
  background-color: background; 
}
<div></div>

А вообще способов много

Answer 2

Для элементов с абсолютным позиционированием

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
 
.wrapper { 
  width: 100%; 
  height: 100vh; 
  background-color: #248cec; 
} 
 
.elem { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  width: 50px; 
  height: 50px; 
  transform: translate(-50%, -50%); 
  background-color: #9ed535; 
}
<div class="wrapper"> 
  <div class="elem"></div> 
</div>

READ ALSO
Колонки одинаковой ширины Bootstrap v4

Колонки одинаковой ширины Bootstrap v4

В Bootstrap v4 есть возможность задать колонкиПри тестировании верстки в Firefox возникала проблема с колонками одинаковой ширины: три колонки должны...

136
C++ WinAPI Рендер HTML

C++ WinAPI Рендер HTML

Есть ли что-небудь чтобы рендерить html на чистом C++ с WinAPI?

147
Как стилизовать input[type=&ldquo;&rdquo;]?

Как стилизовать input[type=“”]?

Подскажите, как можно стилизовать input[type="radio"] и input[type="checkbox"] (без разницы) таким образом, чтобы активный пункт при его выборе полностью обводился...

200
Как убрать синий фон при клике [закрыт]

Как убрать синий фон при клике [закрыт]

При клике примерно на 05 секунды появляется синий фон, стрелка сделана с использованием ссылки в которой svg картинка

151