如何在 div 中间对齐 svg 圆圈？

Question

我需要制作一个圆圈来模拟 Mac OS 中关闭 window 的按钮。但是当我试图将它移低时，svg 的边框将它切断。如何移动边框以将圆圈直接放在面板中间（垂直）？

JSFiddle：https://jsfiddle.net/sm6r0kvn/2/

<div class="panel">
  <svg viewbox="0 0 20 17" width="20" heigth="50"><circle r="7" cx="14" cy="9.5" fill="#fc615e"/></svg>
</div>

Answer 1

您可以将 viewbox 设置为 <svg viewbox="0 0 20 20" width="20" heigth="20">，然后设置 cx 和 cy 50%。如果你想让它在 panel 垂直居中，只需将它设为 flexbox 并添加 align-items: center - 请参见下面的演示：

.block {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 550px;
  min-width: 480px;
  width: 80vw;
  height: 200px;
  background: black;
  border-radius: 10px 10px 5px 5px;
}

.panel {
  background-color: #e0e0e0;
  border-radius: 5px 5px 0 0;
  display: flex; /* added */
  align-items: center; /* added */
}

.text {
  color: white;
  padding: 5px;
}

<div class="block">
  <div class="panel">
    <svg viewbox="0 0 20 20" width="20" heigth="20">
      <circle r="7" cx="50%" cy="50%" fill="#fc615e"/>
    </svg>
  </div>
  <div class="text">
    Text here
  </div>
</div>

Answer 2

这是因为您在 svg viewbox 之外绘制圆圈。您可以使用 CSS 移动整个 svg 框或使其变大

svg {
  border: 1px blue solid;
}
.panel.moved {
  margin-left: 100px;
}

<div class="panel">
  <svg viewbox="0 0 20 20" width="200" heigth="200">
    <circle r="10" cx="10" cy="10" fill="#fc615e"/>
  </svg>
</div>
<div class="panel">
  <svg viewbox="0 0 20 20" width="200" heigth="200">
    <circle r="10" cx="20" cy="10" fill="#fc615e"/>
  </svg>
</div>
<div class="panel">
  <svg viewbox="0 0 30 20" width="300" heigth="200">
    <circle r="10" cx="20" cy="10" fill="#fc615e"/>
  </svg>
</div>
<div class="panel moved">
  <svg viewbox="0 0 20 20" width="200" heigth="200">
    <circle r="10" cx="10" cy="10" fill="#fc615e"/>
  </svg>
</div>

如何在 div 中间对齐 svg 圆圈？

How can I align svg circle in the middle of the div?

html

css

svg

centering