按百分比定位 Div 元素

Positioning Div elements by percentage

本文关键字：元素 Div 定位 百分比      更新时间：2023-09-26

我目前有一个html页面，需要创建一个div，它是页面的整个宽度。我正在尝试按百分比而不是该 px 在该位置组织div。.question 是与需要整页的div 关联的类

我的 css 代码如下所示：

.question {
        position: absolute;
        min-height: 100%;
        min-width: 100%;
      }
      #titlepage{
        position: relative;
        top: 30%;
        width: 50%;
        text-align: center;
        overflow: auto;
        margin-left: auto;
        margin-right: auto;
      }
      html, body {
        background-color: #A0B8C8;
        height:100%;
        width:100%;
      }
<body ontouchmove="BlockMove(event);">
      <div class="question">
        <div id="titlepage">
          <h1> test data </h1>
        </div>
      </div>

目标是使 #titlepagediv从顶部开始并居中为屏幕尺寸的30%。

目前，它距顶部 30%，但边距自动未将其设置为水平居中。

感谢任何帮助，以及解释原因。

谢谢

*添加了编辑 html。它似乎不适用于我的。是否有可能有什么东西覆盖了它？

**编辑。我似乎已经通过添加 right：0 修复了它;左：0;所以它看起来像这样：

.titlepage{
    position: absolute;
    top: 30%;
    width: 50%;
    text-align: center;
    margin: 0 auto;
    right: 0; left: 0;    
  }

谁能解释为什么？

更改 

top: 30%;

自 

height: 30%

我希望这就是你要问的。

相关文章：