html - 顶部 : 50% is not working CSS

Question

我正在做一个网站，我试图将文本居中，但我不知道顶部不起作用。如果我使用这样的东西，它会起作用:

up:25px;

但是当我想使用它时，这不起作用:

up:50%;

你能帮帮我吗？这是我的代码:

.absolute{
    position:absolute;
}

.relative{
    position:relative;
}

.white{
    background-color:white;
}

#menu-title{
    width:300px;
    z-index:5;
    top:50%;
    left:calc(50% - 150px);
    top:calc(50% - 2.5em);
}

<div class='relative' id='menu'>
      <div class='absolute white' id='menu-title'>
        <h2 >Menu</h2>
      </div>
</div>

Answer 1

考虑到您想要将 <h2> 居中在<div>使用 id 为“menu-title”的情况，您有多种方法可以做到这一点。

如果你想使用 top 属性，你首先必须定义要固定的位置，如下所示:

#menu-title {
    position: fixed;
    top: 50%;
} 

另一种方法是使用边距:

#menu-title {
    margin-top: 100px;
}

您可以随时更改 px。