将两个SVG在其容器的中心对齐

Question

我有两个SVG，我想让它们在容器的中心水平和垂直对齐。但是不管我怎么尝试，我得到的结果都很少。

在这里，我使用了flexbox，但没想到它不工作。为什么？如何解决这个问题呢？

​

.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px dashed;
}

.text-box .rect-box{

}

<!-- Start Box -->
<div class ="box" aria-label="do you ever">

   <svg class ="text-box" height="5.59vh" width="15.54vw" viewBox="0 0 172 45">
      <text font-family="Heebo-Light" font-size="24px" fill="#595959" fill-opacity="1" x="50%" y="53%" dominant-baseline="middle" text-anchor="middle">
         <tspan>do you ever</tspan>
      </text>
   </svg>

   <svg class ="rect-box" height="5.59vh" width="15.54vw" viewBox="0 0 272 45" preserveAspectRatio="none">
      <defs>
         <linearGradient gradientTransform="rotate(90, 0.5, 0.5)" id="uniqueDomId-1114">
            <stop offset="0%" stop-color="#AFAFAF" stop-opacity="1"></stop>
            <stop offset="0%" stop-color="#F5F3F8" stop-opacity="1"></stop>
            <stop offset="69.804%" stop-color="#F9F9F9" stop-opacity="1"></stop>
            <stop offset="100%" stop-color="#FFFFFF" stop-opacity="1"></stop>
         </linearGradient>
         <filter id="uniqueDomId-1115" filterUnits="userSpaceOnUse" x="-15.75" y="-15.75" width="303.5" height="76.5">
            <feFlood result="floodOut" flood-color="#CCC1DA" flood-opacity="0.29"></feFlood>
            <feGaussianBlur result="gaussOut" in="SourceAlpha" stdDeviation="2.450000047683716,2.450000047683716">
            </feGaussianBlur>
            <feComposite in="floodOut" in2="gaussOut" operator="in"></feComposite>
         </filter>
      </defs>
      <use transform="translate(-2.72, -0.45) scale(1.0199999809265137, 1.0199999809265137) translate(0, 0)" xlink:href="#uniqueDomId-1116" filter="url(#uniqueDomId-1115)" data-angle="0" data-distance="0" data-height="45" data-scale="1.02" data-adornment-type="drop-shadow" data-width="272" data-transform="[{&quot;type&quot;:&quot;translate&quot;,&quot;args&quot;:[-2.72,-0.45]},{&quot;type&quot;:&quot;scale&quot;,&quot;args&quot;:[1.0199999809265137,1.0199999809265137]}]"></use>
      <g id="uniqueDomId-1116">
         <g id="uniqueDomId-1117">
            <path d="M0,0L272,0 272,45 0,45z" id="uniqueDomId-1118" fill="url(#uniqueDomId-1114)"></path>
         </g>
      </g>
   </svg>

</div>
<!-- End Box -->

​

Answer 1

要将它们彼此对齐，可以使用transform: translateY

​

.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px dashed;
}

.text-box {
  transform: translateY(50%);
  z-index: 1;
}
.rect-box{
  transform: translateY(-50%);
}

<!-- Start Box -->
<div class ="box" aria-label="do you ever">

   <svg class ="text-box" height="5.59vh" width="15.54vw" viewBox="0 0 172 45">
      <text font-family="Heebo-Light" font-size="24px" fill="#595959" fill-opacity="1" x="50%" y="53%" dominant-baseline="middle" text-anchor="middle">
         <tspan>do you ever</tspan>
      </text>
   </svg>

   <svg class ="rect-box" height="5.59vh" width="15.54vw" viewBox="0 0 272 45" preserveAspectRatio="none">
      <defs>
         <linearGradient gradientTransform="rotate(90, 0.5, 0.5)" id="uniqueDomId-1114">
            <stop offset="0%" stop-color="#AFAFAF" stop-opacity="1"></stop>
            <stop offset="0%" stop-color="#F5F3F8" stop-opacity="1"></stop>
            <stop offset="69.804%" stop-color="#F9F9F9" stop-opacity="1"></stop>
            <stop offset="100%" stop-color="#FFFFFF" stop-opacity="1"></stop>
         </linearGradient>
         <filter id="uniqueDomId-1115" filterUnits="userSpaceOnUse" x="-15.75" y="-15.75" width="303.5" height="76.5">
            <feFlood result="floodOut" flood-color="#CCC1DA" flood-opacity="0.29"></feFlood>
            <feGaussianBlur result="gaussOut" in="SourceAlpha" stdDeviation="2.450000047683716,2.450000047683716">
            </feGaussianBlur>
            <feComposite in="floodOut" in2="gaussOut" operator="in"></feComposite>
         </filter>
      </defs>
      <use transform="translate(-2.72, -0.45) scale(1.0199999809265137, 1.0199999809265137) translate(0, 0)" xlink:href="#uniqueDomId-1116" filter="url(#uniqueDomId-1115)" data-angle="0" data-distance="0" data-height="45" data-scale="1.02" data-adornment-type="drop-shadow" data-width="272" data-transform="[{&quot;type&quot;:&quot;translate&quot;,&quot;args&quot;:[-2.72,-0.45]},{&quot;type&quot;:&quot;scale&quot;,&quot;args&quot;:[1.0199999809265137,1.0199999809265137]}]"></use>
      <g id="uniqueDomId-1116">
         <g id="uniqueDomId-1117">
            <path d="M0,0L272,0 272,45 0,45z" id="uniqueDomId-1118" fill="url(#uniqueDomId-1114)"></path>
         </g>
      </g>
   </svg>

</div>
<!-- End Box -->

​

它相对于元素自己的尺寸定位元素，因此transform: translateY(50%)将元素向下移动其高度的50%。