css - нарисуйте 2 квадрата рядом друг с другом, каждый из которых имеет круг в центре

Question

Я пытаюсь выполнить задачу css, где требования гласят:

• Нарисуйте 2 квадрата шириной 50 пикселей рядом
• Каждый квадрат должен иметь круг в центрес шириной 10px
• Расстояние между двумя квадратами должно быть 10px

Кажется, я не могу сделать так, чтобы мой круг появился ... Вот моя скрипка - https://jsfiddle.net/xmozvs5p/

Вот фрагмент моего css:

  .square {
    width:50px;
    height:50px;
    border:1px solid black;
    display:inline-block;
    margin:10px;
  }
  .circle{
    background-color:green;
    border-radius: 50%;
    width:10px;
    display:block;
    margin:auto;
    }

Answer 1

Вы также можете попробовать этот способ с меньшим количеством кода:

.square {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  display: inline-block;
  background:radial-gradient(circle at center,green 5px,transparent 6px);
  margin: 10px 5px;
}

<div class="square">
</div>
<div class="square">
</div>

Answer 2

Добавьте высоту к элементу .circle, и ее можно отцентрировать с помощью flexbox на родительском элементе.

.square {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 10px 5px; /* 10px between elements */
}

.circle {
  background-color: green;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  display: block;
  margin: auto;
}

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