似乎無法居中我的固定格

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

你想是這樣的

？

在我用display:flex; justify-content:center和align-items:center;這樣頁面的中心定位開發商的話開發商總是停留在中心

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; 
 
}

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

Answer 2

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

position:fixed的問題是元素被製成一個絕對定位的元素，並會導致它自身崩潰，因此它沒有寬度，因此沒有任何中心內容。

另一種方法是離開固定位置，但給該元素一個寬度。除了您設置的自動邊距之外，這將使元素居中，並將文本居中放置在同一元素中。

正如在評論中提到的那樣，position:center沒有這樣的東西。

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>