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

288

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;

Создание интернет-магазина интимных товаров в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

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

HTML

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

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

254

HTML

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

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

121

HTML

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

Всем привет!

232