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之类的东西。

Answer 2

你想要这样的东西??

将开发人员定位在我使用display:flex; justify-content:center和align-items:center;这样的页面中心，开发人员始终保持在中心位置

＆＃13;

body{
  margin: 0px;
}
.box{
  background-color: pink;
  background-size: cover;
  height: 100vh;
  position: relative;
  display:flex;
  justify-content: center;
  align-items: center;
  }
h1{
  font-size:25px;
  }
 .down{
height: 100px;
}

＆＃13;

<div class="box">
<h1>
Developer
</h1>
</div>
<div class="down">
 <p>
the rest of the page
</p>
</div>

＆＃13;

Answer 3

我认为你正在寻找这样的东西：

.outer-container {
    position: fixed;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

#hero {
    display: inline-block;
    background: #fff;
}

#hero_text {
    font-size: 9em;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
}

#hero ul {
    list-style-type: none;
}

<div class="outer-container">
    <div class="inner-container">
        <header id="hero">
            <div id="hero_text">Developer.</div>
            <img class="arrow" src="Images/lake_tahoe_img/arrow.svg" alt="Down arrow">
            <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>
    </div>
</div>

（另见this Fiddle）

Answer 4

在下面的解决方案中，一个缺点是你必须将高度和行高固定到外部div（灰色的）。

.abs-center {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
}
.v-center {
  background: yellow;
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
#graybox {
  height: 120px;
  line-height: 120px;
  background: #bbb;
  text-align: center;
}

<div id="graybox" class="abs-center">
  <div class="v-center">
    <p>vertically<br />centered</p>
  </div>
</div>

似乎无法集中我的固定div

4 个答案: