html - 似乎无法使我的固定 div 居中

Question

我已经阅读了无数关于此的帖子来寻找解决方案，但似乎找不到适合我的。我已经构建了一个相当基本的投资组合网站，并且正在尝试构建它，以便您在加载时首先看到的是“开发人员”一词，然后向下滚动到投资组合。

我已经为我的投资组合标题提供了顶部填充以填充屏幕，但无法让“开发人员”一词居中。我很新，所以可能做错了什么!

HTML:

<header id="hero">
    <div id="hero_text">Developer.</div>
    <img class="arrow" src="Images/lake_tahoe_img/arrow.svg" alt="Down arrow"></a>
  <a href="index.html" id="logo">
    <h1>Rob Wood</h1>
    <h2>Front-end Developer</h2>
  </a>
  <nav>
    <ul>
      <li><a href="index.html" class="selected">Portfolio</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>

CSS:

#hero {
    padding-top: 800px;
    z-index: -2;
}

#hero_text {
    position: fixed;
    margin-left: auto;
    margin-right: auto;
    top: 35%;
    color: white;
    font-size: 9em;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
}

.arrow {
    width: 50px;
    top: 70%;
    position: center;
    padding-left: 50%;
    position: fixed;
}

Answer 1

添加到您的#hero_text text-align:center。删除 position:fixed

position:fixed 的问题是该元素被制作成一个绝对定位的元素，会导致它折叠到自身，从而没有宽度，因此，没有任何东西可以居中。

另一种方法是保留固定位置，但给该元素一个宽度。连同您设置的自动边距，这将使元素居中，并使同一元素中的文本居中。

如评论中所述，没有position:center这样的东西。