css - 并排绘制 2 个正方形，每个正方形的中心都有一个圆圈答案

【问题标题】：css - draw 2 squares side by side and each with a circle in the centercss - 并排绘制 2 个正方形，每个正方形的中心都有一个圆圈
【发布时间】：2018-12-19 03:12:00
【问题描述】：

我正在尝试一项 css 挑战，其中要求说明：

并排绘制 2 个宽度为 50px 的正方形
每个正方形的中心应该有一个宽度为 10px 的圆
两个正方形之间的距离应该是10px

我似乎无法让我的圈子出现。这是我的小提琴 - https://jsfiddle.net/xmozvs5p/

这是我的 css 的 sn-p：

  .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;
    }

【问题讨论】：

向内添加高度.circle
@yomisimie - 多么愚蠢！是的，我做到了。但是，我的圈子仍然没有居中。
要垂直居中，添加边距。你甚至可以使用margin: calc((50px - 10px) / 2) auto。这意味着margin-top 和margin-bottom 将是 50px（正方形的高度）- 10px（圆）除以 2（2 个边，顶部和底部）

标签： css

【解决方案1】：

为.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>

【讨论】：

【解决方案2】：

你也可以用更少的代码尝试这种方式：

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

【讨论】：