在 div 中居中 svg [重复]

Question

我试图将黑色 svg 徽标置于被 4 个彩色 div 包围的粉红色 div 中间。想知道为什么它现在不能使用现有代码？我尝试在 svg 上添加一个浮点数，以便将其移动到右侧的棕色 div 旁边，但它似乎不起作用。关于如何正确居中的任何想法？

<style>
ul {
  margin:0;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 77%;
}

li {
  display: block;
  font-size:17px;
  text-decoration:none;
}

.navtext{
  background-color:orange;
  width: 35%;
  height:20%;
  right:0px;
  position:absolute;
  display: flex;
  align-items: center;
}

body {
  margin: 0;
}

.header{
background-color:yellow;
width:100%;
height:20%;
}

.logo{
  position:absolute;
  left:5%;
  background-color:lightblue;
  height:20%;
  display: flex;
  align-items: center;
}

.logotext{
  font-size:27px;
  font-weight:bold;
}

.front {
  background-color:blue;
  height: 81vh;
  position: relative;
  z-index: 2;
  width:100%;
}

.video {
  background: url(https://picsum.photos/id/107/800/800) center/cover;
  height: 100vh;
  margin-top: -100vh;
  position: sticky;
  width:100%;
  top: 0;
}

.container {
  height:200vh;
}

.right{
right:0px;
width:50%;
Height:91%;
position:absolute;
background-color:pink;
/*display: flex;*/
justify-content: center;
align-items: center;
}

.logoanimecont{
  text-align:center;
  width:75%;
  margin:auto;
  
}

.left{
width:50%;
Height:91%;
background-color:green;
display: flex;
justify-content: center;
align-items: center;
}

.titlebox {
  text-align:center;
  width:75%;
  background-color:purple;
  margin:auto;
  
}

.title {
  font-size:30px;
  text-align:center;
  
}

.hide{ display:none }

.rightbordertop{
  width:100%;
  height:25%;
  background-color:red;
}

.rightborderbottom{
  width:100%;
  height:25%;
  bottom:0px;
  position:absolute;
  background-color:darkgrey;
}

.rightborderleft{
  width:25%;
  height:75%;
  background-color:brown;
}

.rightborderright{
  right:0px;
  height:75%;
  width:25%;
  background-color:blue;
  position:absolute;
}

svg {position:absolute; width:50%; height:50%;}
</style>



<div class="container">
  <div class="front">
    <div class="header">
      <div class="logo">
        <span class="logotext">f-e</span>
      </div>
      <div class="nav">
        <div class="navtext">
          <ul>
           <li><a href="#home">About</a></li>
           <li><a href="#news">Services</a></li>
           <li><a href="#contact">Clients</a></li>
           <li><a href="#about">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="left">
      <div class="titlebox">
        <span class="title">Random text, centered v and h.</span>
      </div>
        <div class="right">
        <div class="rightbordertop"></div>
        <div class="rightborderright"></div>
        <div class="rightborderleft"></div>
        <div class="rightborderbottom"></div>
        <div class="logoanimacont">
           <div class="logoanime">
          <svg viewBox="0 0 70 70">
            <path id="metabolism" d="M0,0v72h72V0H0z M45.38,12.19l-1.21,1.66c-0.16,0.23-0.35,0.26-0.57,0.09c-1.47-1-2.85-1.18-4.13-0.53
    c-1.41,0.75-2.11,2.19-2.11,4.31v9.47h4.62c0.28,0,0.42,0.15,0.42,0.44v2.06c0,0.29-0.14,0.44-0.42,0.44h-4.62v23.85
    c0,0.29-0.14,0.44-0.42,0.44h-2.02c-0.26,0-0.39-0.15-0.39-0.44V30.14H31.8c-0.28,0-0.42-0.15-0.42-0.44v-2.06
    c0-0.29,0.14-0.44,0.42-0.44h2.72v-9.47c0-1.58,0.32-2.98,0.97-4.19c0.64-1.23,1.55-2.15,2.72-2.75c1.09-0.56,2.25-0.77,3.5-0.63
    c1.25,0.12,2.44,0.59,3.59,1.41C45.53,11.73,45.56,11.94,45.38,12.19z"/>
  
            <path id="technique" class="hide" d="M0,0v72h72V0H0z M40.05,36.57c0,0.22-0.11,0.33-0.33,0.33h-8.62c-0.22,0-0.33-0.11-0.33-0.33V35
    c0-0.2,0.11-0.3,0.33-0.3h8.62c0.22,0,0.33,0.1,0.33,0.3V36.57z"/>
            
            <path id="digital" class="hide" d="M0,0v72h72V0H0z M45.89,36.15c0,0.19-0.09,0.29-0.28,0.3l-16.83,1.48c0.47,1.7,1.41,3.1,2.81,4.2
        c1.44,1.11,3.06,1.66,4.88,1.66c1.38,0,2.66-0.34,3.87-1.01c1.19-0.66,2.15-1.56,2.88-2.72c0.11-0.19,0.26-0.23,0.45-0.12
        l1.36,0.77c0.19,0.12,0.23,0.28,0.12,0.47c-0.94,1.48-2.18,2.66-3.73,3.52c-1.53,0.86-3.18,1.29-4.95,1.29
        c-2.81,0-5.21-0.99-7.2-2.98c-2-2-3-4.41-3-7.22c0-2.86,0.96-5.27,2.88-7.24c1.91-1.97,4.24-2.95,7.01-2.93
        c2.69,0.02,4.98,1.01,6.89,2.98c1.89,1.95,2.84,4.3,2.84,7.03V36.15z"/>
           </svg>
          </div>
        </div>
        </div>
    </div>
  </div>

  <div class="video"></div>
</div>

<div style="height:150vh"> more content later </div>

Answer 1

这能满足你的需求吗？

svg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 50%;
    height: 50%;
}