html - 如何使驯鹿居中

Question

我有这个驯鹿代码，但它非常偏离中心。我按照教程做了这个，但在教程中它效果很好，但对我来说却不行。

这是驯鹿的所有 CCS 代码。

  .reindeer {
    height: 510px;
    width: 350px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
    
      .face {
        background-color: #A98467;
        height: 150px;
        width: 100px;
        border-radius: 70px;
        position: relative;
        top: 200px;
        left: 320px;
      }
    
      .antler1, .antler2 {
        height: 25px;
        width: 96px;
        border-right: 10px solid #6C584C;
        border-top: 10px solid #6C584C;
        border-radius: 0 20px 0 0;
        z-index: -2;
        position: relative;
        bottom: 15px;
        right: 65px;
      }
    
      .a1, .a2, .a3 {
        background-color: #6C584C;
        height: 55px;
        width: 10px;
        border-radius: 10px;
        position: relative;
      }
    
      .a1 {
        bottom: 55px;
      }
    
      .a2 {
        bottom: 110px;
        left: 30px;
      }
    
      .a3 {
        bottom: 165px;
        left: 60px;
      }
    
      .antler2 {
        left: 65px;
        bottom: 40px;
        transform: rotateY(180deg);
      }
    
      .eye1, .eye2{
        background-color: #333333;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        position: relative;
      }
    
      .eye1 {
        bottom: 5px;
        left: 15px
      }
    
      .eye2 {
        bottom: 25px;
        left: 60px;
      }
    
      .eyeball {
        background-color: white;
        height: 8px;
        width: 8px;
        border-radius: 50%;
        position: relative;
        top: 5px;
        left: 5px;
      }
    
      .ear1, .ear2 {
        background-color: #95755E;
        height: 30px;
        width: 60px;
        border-radius: 0 0 30px 30px;
        position: relative;
        z-index: -1;
      }
    
      .ear1 {
        bottom: 75px;
        right: 23px;
        transform: rotate(-25deg);
      }
    
      .ear2 {
        bottom: 105px;
        left: 60px;
        transform: rotate(25deg);
      }
    
      .nose {
      background-color: #EE0000;
      height: 22px;
      width: 35px;
      border-radius: 50%;
      position: relative;
      bottom: 60px;
      left: 30px;
      }
    
      .nose2 {
        background-color: #F8453B;
        height: 9px;
        width: 15px;
        border-radius: 50%;
        position: relative;
        bottom: 78px;
        left: 43px;
      }
    
      .leg1, .leg2 {
        background-color: #6C584C;
        height: 100px;
        width: 20px;
        position: relative;
        border-radius: 0 0 8px 8px;
        z-index: -2;
      }
    
      .leg1 {
        left: 340px;
        top: 300px;
      }
    
      .leg2 {
        left: 380px;
        top: 200px;
      }
    
      .body {
        background-color: #95755E;
        height: 200px;
        width: 130px;
        border-radius: 100px;
        position: relative;
        bottom: 60px;
        left: 305px;
        z-index: -1;
      }

我不确定它是如何让我的驯鹿偏离中心这么远的，我尝试过改变相对值和绝对值，但它不起作用。有人想帮助我吗？这是一个学校元素，我需要很快完成。

/image/AqBWD.jpg

<div class="reindeer">
    <div class="face">
        <div class="antler1">
            <div class="a1"></div>
            <div class="a2"></div>
            <div class="a3"></div>
        </div>
        <div class="antler2">
            <div class="a1"></div>
            <div class="a2"></div>
            <div class="a3"></div>
        </div>
        <div class="eye1">
            <div class="eyeball"></div>
        </div>
        <div class="eye2">
            <div class="eyeball"></div>
        </div>
        <div class="ear1"></div>
        <div class="ear2"></div>
        <div class="nose"></div>
        <div class="nose2"></div>
    </div>
    
    <div class="leg1"></div>
    <div class="leg2"></div>
    <div class="body"></div>

</div>

我发现了一些东西，但又出现同样的问题，它没有完全居中。我忘了添加

   height: 510px;
    width: 350px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

在.raindeer中 现在它更加居中，但我不知道如何使其更加居中。

Answer 1

在样式方面做得非常出色。不是试图让驯鹿居中 - 最简单的方法是将驯鹿放在 div 中并居中 - 我使用 100vw 和 100vh 使容器成为全屏大小 - 然后 flex 以使其垂直和水平对齐中心。

更新 - 我还调整了不同元素的左侧位置。您也可以使用 flex 来做到这一点 - 但为了尽可能简单 - 我只是减少了您拥有的左侧值。

最好在全屏片段中查看此内容 - 再说一遍 - 样式方面的工作非常好 - 我喜欢你所做的:)

.wrapper {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content:center
 }
 
 .reindeer {
    position: relative;
  }

  .face {
    background-color: #A98467;
    height: 150px;
    width: 100px;
    border-radius: 70px;
    position: relative;
    top: 200px;
    left: 0;
  }

  .antler1, .antler2 {
    height: 25px;
    width: 96px;
    border-right: 10px solid #6C584C;
    border-top: 10px solid #6C584C;
    border-radius: 0 20px 0 0;
    z-index: -2;
    position: relative;
    bottom: 15px;
    right: 70px;
  }

  .a1, .a2, .a3 {
    background-color: #6C584C;
    height: 55px;
    width: 10px;
    border-radius: 10px;
    position: relative;
  }

  .a1 {
    bottom: 55px;
  }

  .a2 {
    bottom: 110px;
    left: 30px;
  }

  .a3 {
    bottom: 165px;
    left: 60px;
  }

  .antler2 {
    left: 65px;
    bottom: 50px;
    transform: rotateY(180deg);
  }

  .eye1, .eye2{
    background-color: #333333;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: relative;
  }

  .eye1 {
    bottom: 5px;
    left: 15px
  }

  .eye2 {
    bottom: 25px;
    left: 60px;
  }

  .eyeball {
    background-color: white;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    position: relative;
    top: 5px;
    left: 5px;
  }

  .ear1, .ear2 {
    background-color: #95755E;
    height: 30px;
    width: 60px;
    border-radius: 0 0 30px 30px;
    position: relative;
    z-index: -1;
  }

  .ear1 {
    bottom: 75px;
    right: 23px;
    transform: rotate(-25deg);
  }

  .ear2 {
    bottom: 105px;
    left: 60px;
    transform: rotate(25deg);
  }

  .nose {
  background-color: #EE0000;
  height: 22px;
  width: 35px;
  border-radius: 50%;
  position: relative;
  bottom: 60px;
  left: 30px;
  }

  .nose2 {
    background-color: #F8453B;
    height: 9px;
    width: 15px;
    border-radius: 50%;
    position: relative;
    bottom: 78px;
    left: 43px;
  }

  .leg1, .leg2 {
    background-color: #6C584C;
    height: 100px;
    width: 20px;
    position: relative;
    border-radius: 0 0 8px 8px;
    z-index: -2;
  }

  .leg1 {
    left: 15px;
    top: 300px;
  }

  .leg2 {
    left: 55px;
    top: 200px;
  }

  .body {
    background-color: #95755E;
    height: 200px;
    width: 130px;
    border-radius: 100px;
    position: relative;
    bottom: 60px;
    left: -15px;
    z-index: -1;
  }

<div class="wrapper">
  <div class="reindeer">
      <div class="face">
          <div class="antler1">
              <div class="a1"></div>
              <div class="a2"></div>
              <div class="a3"></div>
          </div>
          <div class="antler2">
              <div class="a1"></div>
              <div class="a2"></div>
              <div class="a3"></div>
          </div>
          <div class="eye1">
              <div class="eyeball"></div>
          </div>
          <div class="eye2">
              <div class="eyeball"></div>
          </div>
          <div class="ear1"></div>
          <div class="ear2"></div>
          <div class="nose"></div>
          <div class="nose2"></div>
      </div>

      <div class="leg1"></div>
      <div class="leg2"></div>
      <div class="body"></div>
  </div>
</div>