How to center an unordered list - html

Question

I've tried multiple times now and I can't figure out how to place my unordered list in the middle of my div.
1: Describes how it looks like right now
2: Describes how I wish it to look like
HTML:
<div id="wrapper">
<div class="container">
<img src="flower.jpg"/>
</div>
<div class="header">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
CSS:
#wrapper {
position:absolute;
background-color: white;
width:100%;
height:100%;
top:0px;
left:0px;
}
img {
width: 100%;
height: 100%;
display: block;
}
.header {
width: 100%;
height: 100px;
background-color: green;
}
.header a {
color: black;
text-decoration: none;
margin: 50px;
padding: 10px;
font-size: 40px;
text-align: center;
}
ul {
list-style-type: none;
position: absolute;
}
li {
float: left;
}
What am I doing wrong? I've tried these in multiple elements:
position: relative/absolute
text-align: center
margin
padding
display: inline
Thanks for the help <3

Answer 1

You can change the styles for the ul element to match the code below:
ul {
list-style-type: none;
position: absolute;
left: 0;
right: 0;
display: flex;
justify-content: center;
}

Answer 2

You can achieve this with flex:
.header {
display: flex;
width: 100%;
height: 100px;
background-color: green;
justify-content: center;
}
Note: you can also change the value of justify-content. A very good explanation about flex and the different properties is this one: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

ul {
display: flex;
justify-content:center;
text-align: center;
list-style-type:none;
width:80%;//depending on how wide you want it and note justify center wont work
unless you specify width on most cases
}

Answer 4

You can do that using flex, like this:
ul {
display: flex;
flex-direction: row;
justify-content: center;
list-style-type:none;
}
You can also try space-around value for justify-content property, and items will have space before, between, and after them.
Here is the working example: https://jsfiddle.net/tLc9zmoy/26/