时间戳

首页 > 解决方案 > 顶部：设置为相对位置时，50% 不起作用

html - 顶部：设置为相对位置时，50% 不起作用

问题描述

frame1的顶部位置保持不变，即使已经设置为顶部：50%。包含块是body标签。不明白为什么它不起作用？

<html lang="en">
  <body>        
    <div class="frame1">
      <div class="frame">
        <div class="center">
        </div>
      </div>
    </div>
  </body>
</html>

CSS 文件：

.frame1 {
    position: relative;
    top: 50%;
    left: 50%;
    
    width: 600px;
    height: 600px;
    background: orangered;
    border: 2px solid blueviolet;
}

标签： htmlcsscss-position

解决方案

相对位置意味着，默认情况下，该位置相对于项目在文档中的位置。

因此top: 50%; left: 50%;什么都不做。因为它有 50% 是未定义的。

推荐阅读