Can't seem to center my fixed div - html

Question

I've read through countless posts about this looking for a solution but can't seem to find one that works for me. I've built a fairly basic portfolio site, and am trying to build it such that the first thing you see on load is the word 'Developer', and you then scroll down to the portfolio.
I've given my portfolio header a top padding to fill the screen, but can't get the word 'Developer' to center within that. I'm pretty new so have probably done something very wrong!
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>Portfolio</li>
<li>About</li>
<li>Contact</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

Add to your #hero_text text-align:center. Remove position:fixed
The problem with position:fixed is the element is made like an absolutely positioned element and will cause it to collapse unto itself giving it no width and, therefore, nothing to center within.
An alternative would be to leave the fixed positioning but give that element a width. Along with auto margins, which you set, this will center the element plus center the text within the same element.
As mentioned in the comments, there is no such thing as position:center.

Answer 2

you want something like this??
to position developer in the center of the page i used display:flex; justify-content:center and align-items:center; like this, the words developer always stays in the 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 3

I think you're looking for something like this :
.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>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
</div>
(see also this Fiddle)

Answer 4

In the following solution, one drawback is that you have to fix a height and a line-height to the outside div (the gray one).
.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>