1

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

введите сюда описание изображения

введите сюда описание изображения

@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>

1 ответ 1

4

Для этого можно воспользоваться 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>

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

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

5
  • я опробовал код, который вы написали, и это в принципе то, что я хотел. Но при уменьшении разрешения, блок уходит вверх
    – Alan
    19 авг 2020 в 17:19
  • @Vasily наверное нужно поправить ещё - border-radius: 100%; на 50% 19 авг 2020 в 17:31
  • @Vasily да, всё верно. Спасибо большое!
    – Alan
    19 авг 2020 в 17:33
  • @Vasily я не настаиваю, но если следовать вашей логике, то не нужно ничего менять в коде автора 19 авг 2020 в 17:34
  • @Vasily но тем не менее вы изменили на 50%. Если честно, то мой коммент просто был сигнальным (+) Вы очень быстро ответили и вероятно в скопированном коде вопроса просто не заметили эту неточность с border-radius: 100%; Это со всеми бывает и у меня тоже. Не замечаю, пропускаю ошибки в коде вопроса, если они принципиально не влияют на работу. 20 авг 2020 в 5:17

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.