css - 在 2 div 内垂直和水平居中 svg，而不向 svg 的父 div 添加 Prop

Question

我在 div 中有一个 svg，我需要将 svg 垂直和水平居中。问题是 svg 的宽度和高度是使用库 vx-responsive 获取的 所以生成的 DOM 是:

编辑:添加代码

<div class="w-100 h-70 bg-yellow pa3 ba b--red flex flex-center center-vertical">
  <div style="width: 100%; height: 100%">
    <svg width="41.59375" height="25.208">
      <rect x="0" y="0" width="41.59375" height="25.208" stroke="green"></rect>
    </svg>
  </div>
</div>

结果是:

我无法删除中间的 div，我需要它但我无法向其添加 Prop 。

我能做些什么来解决这个问题？

Answer 1

有一个简单的技巧可以让 HTML 元素居中:

.w-100{
width:100vw;
height:100vh;
}
.w-100 div{
position:relative;
}
svg{
display:block;
margin:auto;
position:absolute;
top:0; bottom:0; left:0; right:0;
}

<div class="w-100 h-70 bg-yellow pa3 ba b--red flex flex-center center-vertical">
  <div style="width: 100%; height: 100%">
    <svg width="41.59375" height="25.208">
      <rect x="0" y="0" width="41.59375" height="25.208" stroke="green"></rect>
    </svg>
  </div>
</div>

您还可以阅读这篇文章:Centering in CSS: A Complete Guide