Question

我有一个代码，并且使用top和margin-top有一些小问题，无法使用top：50％我不知道为什么然后我使用margin-top：50％但它没有将画布移动到页面的中间（50 ％），如何将画布移动到页面中间（仅高度而不是宽度）

.so {
  position: relative;
  top: 50%;
  clear: both;
  float: left;
  left: 10%;
}

@media only screen and (orientation: landscape) {
  .so {
    position: relative;
    margin-top: 50%;
    clear: both;
    float: left;
    left: 10%;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>
    <div class="animatedParent">
      <div>
        <div class="so">
          <canvas width="30" height="30" style="background-color:blue"></canvas> &nbsp;
          <canvas width="30" height="30" style="background-color:pink"> </canvas> &nbsp;
          <canvas width="30" height="30" style="background-color:gray"> </canvas>
        </div>
      </div>
    </div>
  </body>
</html>

使用margin-top无法将内容带到页面中间

0 个答案: