Центрирование div по обеим осям CSS

Question

Как можно сделать так, чтобы при разных разрешениях экрана, блок не двигался с места, а находился по-центру?

@import url('https://fonts.googleapis.com/css2?family=Mr+Dafoe&display=swap');

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  background-color: #000;
}

.circle {
  width: 270px;
  height: 270px;
  margin: 15% auto;
  border: solid 3px #fff;
  border-radius: 100%;
}

.text {
  margin-top: 30%;
  font-size: 60px;
  display: flex;
  justify-content: center;
  font-family: 'Mr Dafoe', cursive;
}

<div class="circle">
  <div class="text">
    <p>Qwerty</p>
  </div>
</div>

Answer 1

Для этого можно воспользоваться Flex, задав для свойства justify-content значение "center":

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 500px;
  background-color: #000;
}

.circle {
  width: 270px;
  height: 270px;
  border: solid 3px #fff;
  border-radius: 50%;
}

<div class="circle"></div>

Я уже рассматривал данный вопрос более подробно здесь:

Как расположить контент по вертикальному центру страницы

БЛОГ НА HUSL

Центрирование div по обеим осям CSS

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