Trying to add a center title to my page - css

Question

I'm looking to add a center text title in the middle of my page and it won't show up. Code seems correct, don't see a bug.
<div id="welcome_text_div">
<p id="welcome_text"> Welcome </p>
</div>
#welcome_text_div {
position: absolute;
background-color:red;
width:800px;
height:300px;
top: 50%;
margin-top: -150%;
left: 50%;
margin-left: -400px;
}
#welcome_text {
color: white;
font-family: sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 55px;
text-align: center;
}

Answer 1

You just need to use text-align: center and it should center automatically. BTW I see you are using ids often which is very bad practice. IDs should be used for javasscript selectors while class for css.
.center-text {
text-align:center;
}
.title-text {
// Do css formating here
}
<div class="center-text title-text">
<p class="page-title"> Welcome </p>
</div>

Answer 2

try this
#welcome_text_div {
position: absolute;
background-color:red;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#welcome_text {
color: white;
font-family: sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 55px;
text-align: center;
width: 800px;
line-height: 300px;
}
<div id="welcome_text_div">
<p id="welcome_text"> Welcome </p>
</div>
<div id="welcome_text_div">
<p id="welcome_text"> Welcome </p>
</div>
#welcome_text_div {
position: absolute;
background-color:red;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#welcome_text {
color: white;
font-family: sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 55px;
text-align: center;
width: 800px;
line-height: 300px;
}

Answer 3

You can achieve this with flexbox.
All you need to do to the container is define its width and height (and give it a bg color):
#welcome_text_div {
background-color:red;
width:800px;
height:300px;
}
Then add these three lines to set the flexbox display context, and center it vertically and horizontally:
display:flex;
align-items:center;
justify-content:center;
Then remove all the extra formatting from your inner div.
#welcome_text_div {
background-color:red;
width:800px;
height:300px;
display:flex;
align-items:center;
justify-content:center;
}
#welcome_text {
color: white;
font-family: sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 55px;
}
https://jsfiddle.net/k5zve6bf/