Margin not giving any results on divs - css

Question

I'm not any kind of CSS pro. But margin doesn't seem to work in any other parts than the ul/li list provided below.
I have played with positions and other divs.
html, body {
margin: 0;
padding: 0;
}
body {
background-color: rgb(184, 184, 184);
background-repeat: no-repeat;
background-position: center;
background-size: auto;
background-image: url('/images/landing.jpg');
font-family: Montserrat;
}
.header {
top: 0;
position: fixed;
background-color: gray;
width: 100%;
height: 60px;
justify-content: center;
align-items: center;
display: flex;
}
.menu {
position: fixed;
top: 6px;
right: 0;
}
.menu ul li {
display: inline;
}
.menu ul li a {
color: white;
text-decoration: none;
font-size: 16px;
font-weight: lighter;
padding: 0 20px;
}
.welcome {
position: absolute;
color: white;
font-size: 50px;
top: 459px;
margin: auto;
}
HTML:
<div class='welcome'>
<span>Hello!</span>
</div>
Trying to get welcome div to center

Answer 1

You are setting margin: auto on an absolute positioned element. I suppose you are trying to center the 'welcome' element (as per your question, this fact is not clear). An absolute positioned element is dependent on its ancestors positioning and size.
One of the many solutions to center an absolute positioned element if to move it to 50% from the top and left of it's parent, and than apply translate to nudge it to the center: top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%).

Answer 2

welcome class position is absolute so welcome class parent should be relative to center the welcome div. And also if you want to horizontally center the div you should change margin: auto; to margin: 0 auto;
Or you can make the parent div display to flex, then use align-items, justify-content to center.
.parent { display: flex, align-items: center, justify-content: center }

Answer 3

Try changing your welcome css class to this:
.welcome {
position: absolute;
left: 50%;
transform: translate(-50%);
}

Answer 4

Replace your .welcome css class with this css code :
html, body {
margin: 0;
padding: 0;
}
body {
background-color: rgb(184, 184, 184);
background-repeat: no-repeat;
background-position: center;
background-size: auto;
background-image: url('/images/landing.jpg');
font-family: Montserrat;
}
.header {
top: 0;
position: fixed;
background-color: gray;
width: 100%;
height: 60px;
justify-content: center;
align-items: center;
display: flex;
}
.menu {
position: fixed;
top: 6px;
right: 0;
}
.menu ul li {
display: inline;
}
.menu ul li a {
color: white;
text-decoration: none;
font-size: 16px;
font-weight: lighter;
padding: 0 20px;
}
.welcome {
left:50%; right:50%;
top:50%; bottom:50%;
position: absolute;
}
<div class='welcome'>
<span>Hello!</span>
</div>