отображать круг в центре с гибкостью [отзывчивый]

Question

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

HTML

<div class="circle">Hello I am A Circle </div>

CSS

   .circle {
        width:50px;
        height:50px;
        border-radius:100%;
        font-size:50px;
        color:#fff;
        line-height:500px;
        text-align:center;
        background:#000;
        flex:1;
        justify-content:center;
        align-items:center;
   }

Answer 1

Задайте вашему контейнеру определенную c высоту, и вы увидите, что ваш код работает как задумано. Проблема в том, что ваш контейнер размером с круг, поэтому вы не заметите этого, пока не сделаете контейнер больше. Попробуйте сделать его высотой 500 пикселей.