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

Question

Как разместить элемент с классом 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: 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;

Answer 3

Вариант на основе 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>

БЛОГ НА HUSL

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

Ответы (3 шт):