How to align the div horizontally - css

Question

I am having difficulty aligning the divs in the middle of the page. Hence I have used absolute positioning to place them in the middle.But when I try to do media queries its difficult to place them in the middle. Please any help is appreciated.
nav>ul {
position: absolute;
top: 114px;
text-align: center;
;
}
nav>ul>li {
list-style: none;
float: left;
}
nav>ul>li>a {
text-decoration: none;
font-family: 'Abel', sans-serif;
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 10px 45px 10px 45px;
background: #20639B;
border-left: 3px solid #34F532;
}
.color2 {
height: 0px;
border-bottom: 45px solid #20639B;
}
<div class="color2">
<div class="header">
<nav>
<ul>
<li> Privacy</li>
<li> Terms of Use</li>
<li>Copyright</li>
<li>Trademark</li>
<li>Logos</li>
<li>Pay Transparency</li>
</ul>
</nav>
</div>
</div>

Answer 1

You were close. Just remove position: absolute from nav>ul, and remove the float: left from nav>ul>li and replace it with display: inline-block.
nav>ul {
padding-top: 10px;
text-align: center;
}
nav>ul>li {
list-style: none;
display: inline-block;
}
nav>ul>li>a {
text-decoration: none;
font-family: 'Abel', sans-serif;
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 10px 45px 10px 45px;
background: #20639B;
border-left: 3px solid #34F532;
}
.color2 {
height: 0px;
border-bottom: 40px solid #20639B;
}
<div class="color2">
<div class="header">
<nav>
<ul>
<li> Privacy</li>
<li> Terms of Use</li>
<li>Copyright</li>
<li>Trademark</li>
<li>Logos</li>
<li>Pay Transparency</li>
</ul>
</nav>
</div>
</div>

Answer 2

Flexbox can be one way to go. Here a quick JS Fiddle that shows you how you can achieve what you want: https://jsfiddle.net/58u76mrn/13/
nav {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100vw;
}
nav a {
text-decoration: none;
font-family: 'Abel',sans-serif;
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 10px 45px 10px 45px;
background: #20639B;
border-left: 3px solid #34F532;
}
.color2 {
height: 0px;
}

Answer 3

Check this js fiddle
https://jsbin.com/geqovukozo/edit?css,output
nav{
position:absolute;
top:50%;
width:100%;
transform:translateY(-50%);
}
nav>ul {
text-align: center;
font-size:0;
}
nav>ul>li {
list-style: none;
display:inline-block;
}
nav>ul>li>a {
display:block;
text-decoration: none;
font-family: 'Abel', sans-serif;
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 10px 45px 10px 45px;
background: #20639B;
border-left: 3px solid #34F532;
}
.color2 {
border-bottom: 45px solid #20639B;
}
Use positions with transform property in this case. and instead of float:left; use display:inline-block;