时间戳

首页 > 解决方案 > 使用 margin-top 无法将内容带到页面中间

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

问题描述

我有一个代码和一些使用 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>

标签： csshtmlmargin

解决方案

推荐阅读