Абсолютное центрирование блока на HTML CSS

364
12 апреля 2022, 17:20

Как разместить элемент с классом center по центру экрана?

<body>
    <wrapper>
        <div class="center">
            <h1>Hello World</h1>
        </div>
    </wrapper>
</body>
Answer 1

Например:

* {
  box-sizing: border-box;
}
html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="wrapper">
  <div class="center">
    <h1>Hello World</h1>
    <p>Test</p>
    <a href="#">Test</a>
  </div>
</div>

Answer 2

Вариант на основе display: grid;

body {
  margin: 0;
}
wrapper {
  display: grid;
  place-items: center;
  height: 100vh;
}
<body>
  <wrapper>
    <div class="center">
      <h1>Hello World</h1>
      <p>Test</p>
      <a href="#">Test</a>
    </div>
  </wrapper>
</body>

Answer 3

Можно использовать display: flex; у родителя и всё что внутри установить по центру по горизонтали justify-content: center; и вертикали align-items: center;, при том каждый родитель должен иметь ширину и высоту, на которую wrapper будет опираться.

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}
wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  
  width: inherit;
  height: inherit;
}
<body>
    <wrapper>
        <div class='center'>
            <h1>Hello World</h1>
        </div>
    </wrapper>
</body>

Так же можно использовать position: absolute; у наследователя, но при этом родитель должен иметь position: relative;

READ ALSO
Не могу выровнять элементы (flexbox) [дубликат]
HTML

Не могу выровнять элементы (flexbox) [дубликат]

Ссылка на картинки Нужно позиционировать картинки как в макете: Макет + фото на всякий случай как должно быть: как должно быть и как у меня...

 139
Убрать грид-сетку, если контета нет
HTML

Убрать грид-сетку, если контета нет

Нужно скрыть сетку, если карточки не наполнены

 305
Как выполнить анимацию из последнего состояния анимации SVG без использования JavaScript?
HTML

Как выполнить анимацию из последнего состояния анимации SVG без использования JavaScript?

Я учусь использовать SVG и / или css clip-pathЯ создал, что-то вроде этого:

 211
Как вызвать метод doDelete или doPut в сервлете из jsp
HTML

Как вызвать метод doDelete или doPut в сервлете из jsp

Всем привет!

 284