将 SVG 居中放在 DIV 中

Question

我有一个带有 SVG 的 div：

.svg * {
  display: block;
  margin: 0 auto;
  fill: red;
}

<div class="foo ball design">
  <svg class="svg pen" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48">
    <g>
      <path data-color="color-2" fill="#136f71" d="M5.586,15L15,5.586l-3.293-3.293c-0.391-0.391-1.023-0.391-1.414,0l-8,8 c-0.391,0.391-0.391,1.023,0,1.414L5.586,15z"></path>
      <rect data-color="color-2" x="7.636" y="10.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -5.9203 14.293)" fill="#136f71" width="13.313" height="7.314"></rect>
      <rect data-color="color-2" x="28.05" y="29.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -14.3761 34.707)" fill="#136f71" width="13.313" height="10.143"></rect>
      <path data-color="color-2" fill="#136f71" d="M44.085,35.329l-8.757,8.757l9.475,1.895C44.869,45.994,44.935,46,45,46 c0.263,0,0.518-0.104,0.707-0.293c0.236-0.236,0.339-0.575,0.273-0.903L44.085,35.329z"></path>
      <path fill="#136f71" d="M45.707,12.293l-10-10c-0.391-0.391-1.023-0.391-1.414,0l-5.291,5.291l2.706,2.709 c0.39,0.391,0.39,1.024-0.001,1.414C31.511,11.902,31.256,12,31,12c-0.256,0-0.512-0.098-0.708-0.293l-2.705-2.708l-3.584,3.584 l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C25.52,15.902,25.264,16,25.008,16s-0.512-0.098-0.707-0.293l-1.711-1.711 l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414C22.52,22.902,22.264,23,22.008,23s-0.512-0.098-0.707-0.293 l-3.711-3.711l-3.586,3.586l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C15.52,25.902,15.264,26,15.008,26 s-0.512-0.098-0.707-0.293l-1.711-1.711l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414 C12.52,32.902,12.264,33,12.008,33s-0.512-0.098-0.707-0.293L7.59,28.996l-5.297,5.297c-0.391,0.391-0.391,1.023,0,1.414l10,10 C12.488,45.902,12.744,46,13,46s0.512-0.098,0.707-0.293l32-32C46.098,13.316,46.098,12.684,45.707,12.293z M38,16 c-1.105,0-2-0.895-2-2c0-1.105,0.895-2,2-2s2,0.895,2,2C40,15.105,39.105,16,38,16z"></path>
    </g>
  </svg>
</div>

我想将 SVG 放在 div 的中心。当 SVG 处于“类似 html”的代码形式时，这不是将 SVG 居中的正确方法吗？ （不知道叫什么。）

我知道我的目标是正确的，因为 fill: red 正在工作。

如果您需要查看我的更多代码，请提供建议并告诉我，感谢您的宝贵时间！

Answer 1

尝试使用 sudo-element 方法将 SVG 在您的 div 中垂直居中，例如：

.svg * {
 
  fill: red;
       
}
.foo.ball{
   text-align:center;
   background-color:#333;
   width:150px;
   height:150px;
   margin:0 auto;
   border-radius: 50%;
   border: 20px solid  #945437;
}
.svg{
  display: inline-block;
  vertical-align: middle;
}
.foo.ball.design:after {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

<div class="foo ball design">
  <svg class="svg pen" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48">
    <g>
      <path data-color="color-2" fill="#136f71" d="M5.586,15L15,5.586l-3.293-3.293c-0.391-0.391-1.023-0.391-1.414,0l-8,8 c-0.391,0.391-0.391,1.023,0,1.414L5.586,15z"></path>
      <rect data-color="color-2" x="7.636" y="10.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -5.9203 14.293)" fill="#136f71" width="13.313" height="7.314"></rect>
      <rect data-color="color-2" x="28.05" y="29.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -14.3761 34.707)" fill="#136f71" width="13.313" height="10.143"></rect>
      <path data-color="color-2" fill="#136f71" d="M44.085,35.329l-8.757,8.757l9.475,1.895C44.869,45.994,44.935,46,45,46 c0.263,0,0.518-0.104,0.707-0.293c0.236-0.236,0.339-0.575,0.273-0.903L44.085,35.329z"></path>
      <path fill="#136f71" d="M45.707,12.293l-10-10c-0.391-0.391-1.023-0.391-1.414,0l-5.291,5.291l2.706,2.709 c0.39,0.391,0.39,1.024-0.001,1.414C31.511,11.902,31.256,12,31,12c-0.256,0-0.512-0.098-0.708-0.293l-2.705-2.708l-3.584,3.584 l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C25.52,15.902,25.264,16,25.008,16s-0.512-0.098-0.707-0.293l-1.711-1.711 l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414C22.52,22.902,22.264,23,22.008,23s-0.512-0.098-0.707-0.293 l-3.711-3.711l-3.586,3.586l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C15.52,25.902,15.264,26,15.008,26 s-0.512-0.098-0.707-0.293l-1.711-1.711l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414 C12.52,32.902,12.264,33,12.008,33s-0.512-0.098-0.707-0.293L7.59,28.996l-5.297,5.297c-0.391,0.391-0.391,1.023,0,1.414l10,10 C12.488,45.902,12.744,46,13,46s0.512-0.098,0.707-0.293l32-32C46.098,13.316,46.098,12.684,45.707,12.293z M38,16 c-1.105,0-2-0.895-2-2c0-1.105,0.895-2,2-2s2,0.895,2,2C40,15.105,39.105,16,38,16z"></path>
    </g>
  </svg>
</div>

sudo-element 是一个在运行时呈现的元素，无需在 HTML 中编写它，它可以让您在主要元素周围添加许多功能

使用这种技术是垂直对齐元素的众多方法之一，您可以阅读更多关于它的信息here

使用这种方法分两步完成，第一步是将 sudo 元素添加到容器中，例如：

.your_container_class:after{
  content:'';
  display:inline-block;
  height:100%;
  vertical-align:middle;
}

第二步是将这两个属性添加到您希望居中的内容中：

.your_content_class{
  display:inline-block;
  vertical-align:middle;
}

重要提示

为了让这个工作容器本身应该有一个高度属性，如：

.your_container_class{
 height:100%/*or 200px; or any other height*/
}

Answer 2

SVG 元素应该有一个 display:block、width 和 margin:0 auto 应用于它，而不是应用于其中的嵌套元素 (*)

svg {
 width   : 200px;
 display : block;
 margin  : 0 auto;
}

更新：

更简单的方法是在持有人 div 上使用 text-align:center 代替（svg 仍然需要宽度）

div{ text-align : center; }

Answer 3

• 制作 div position:relative 和 svg position:absolute
• 对于 svg 给它top:(calc 50% - 24px) 和 left:(50% - 24px)

这是包含 div 的高度的 50% 减去 svg 的高度的一半和包含 div 的宽度的 50% 减去 svg 的宽度的一半。 position:absolute 元素（即 svg）的边界是它的 position:relative 父级（即 .foo）的边界。

片段

.svg {
  display: block;
  margin: 0 auto;
  position: absolute;
  top: calc(50% - 24px);
  left: calc(50% - 24px);
}
.foo {
  height: 150px;
  width: 150px;
  position: relative;
  border-radius: 50%;
  border: 20px solid brown;
  background: black;
}

<div class="foo ball design">
  <svg class="svg pen" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48">
    <g>
      <path data-color="color-2" fill="#e00" d="M5.586,15L15,5.586l-3.293-3.293c-0.391-0.391-1.023-0.391-1.414,0l-8,8 c-0.391,0.391-0.391,1.023,0,1.414L5.586,15z"></path>
      <rect data-color="color-2" x="7.636" y="10.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -5.9203 14.293)" fill="#e00" width="13.313" height="7.314"></rect>
      <rect data-color="color-2" x="28.05" y="29.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -14.3761 34.707)" fill="#e00" width="13.313" height="10.143"></rect>
      <path data-color="color-2" fill="#e00" d="M44.085,35.329l-8.757,8.757l9.475,1.895C44.869,45.994,44.935,46,45,46 c0.263,0,0.518-0.104,0.707-0.293c0.236-0.236,0.339-0.575,0.273-0.903L44.085,35.329z"></path>
      <path fill="#136f71" d="M45.707,12.293l-10-10c-0.391-0.391-1.023-0.391-1.414,0l-5.291,5.291l2.706,2.709 c0.39,0.391,0.39,1.024-0.001,1.414C31.511,11.902,31.256,12,31,12c-0.256,0-0.512-0.098-0.708-0.293l-2.705-2.708l-3.584,3.584 l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C25.52,15.902,25.264,16,25.008,16s-0.512-0.098-0.707-0.293l-1.711-1.711 l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414C22.52,22.902,22.264,23,22.008,23s-0.512-0.098-0.707-0.293 l-3.711-3.711l-3.586,3.586l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C15.52,25.902,15.264,26,15.008,26 s-0.512-0.098-0.707-0.293l-1.711-1.711l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414 C12.52,32.902,12.264,33,12.008,33s-0.512-0.098-0.707-0.293L7.59,28.996l-5.297,5.297c-0.391,0.391-0.391,1.023,0,1.414l10,10 C12.488,45.902,12.744,46,13,46s0.512-0.098,0.707-0.293l32-32C46.098,13.316,46.098,12.684,45.707,12.293z M38,16 c-1.105,0-2-0.895-2-2c0-1.105,0.895-2,2-2s2,0.895,2,2C40,15.105,39.105,16,38,16z"></path>
    </g>
  </svg>
</div>