顶部:50％不起作用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>与'菜单列表'的ID相中为CC_1，您有几种方法可以做到。

如果要使用首先要定义要修复的位置的顶部属性，例如：

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

另一种方法是使用边距：

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

您可以随时更改PX。

Answer 2

您应该使用位置：固定并且还取决于文本的大小，您可以将其移至中心，并使用变换

#menu-title{
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
 }

希望有帮助

Answer 3

使position:fixed

.absolute{
    position:fixed;
}
.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 4

首先...它正在工作，只能像您期望的那样。CSS top:calc(50% - 2.5em)是相对于第一个定位的祖先元素的。在您的情况下，这是带有id="menu"的相对（父）元素。该元素的高度为0。因此，它可以按照应有的方式工作，但并不是您预期的。

您可能已经期望菜单具有一定的高度。它没有，因为它的独生子（菜单标题div）是绝对的。绝对定位的元素不会增长父母。

您更有可能的是，您期望标题将相对于视口高度定位，而不是相对于其父母。

---

有三种方法可以将菜单标记相对于视口高度放置：

解决方案1.从父

中删除相对定位

这将使父母位置静态（未定位），并且第一个定位的祖先元素成为视口。视口本质上的高度为100％。因此，该解决方案有效。可以在此处找到此解决方案的工作示例：http：//codepen.io/anon/pen/bblzva

解决方案2.给父母100％高度

从祖先删除相对定位时，您可以选择100％的高度。但是，这不是一项直接的任务。只需将CSS height: 100%添加到父级是不够的。菜单div的高度相对于其父元素的高度，而不是视图的高度。因此，您需要将父母明确设置为100％（视口高）。这可以通过将body,html {height: 100%;}添加到CSS来实现。可以在此处找到此解决方案的工作示例：http：//codepen.io/anon/pen/pen/xnzgov

解决方案3.使用固定位置

知道position: fixed与position: absolute根本不同，并且在较旧的iOS和Android版本（库存浏览器）上存在兼容性问题。但是，这可能会导致预期的行为。这可以通过以下事实来解释："位置：固定"意味着相对于视口（而不是父母）的定位。您应该使用固定在标题自己的位置。可以在此处找到此解决方案的工作示例：http：//codepen.io/anon/pen/pbqgpb