How can i center a certain container at the very middle of screen?

Hello, i have no problem with positioning, i could do it by setting position and using top,left, right etc… but how do i exactly center a certain lets say container in the middle of document?
Here’s my pic:


So i wish to exactly center the last container down there with those links nested i made as a navigations but without using position and playing around with it, as you can see bellow in my CSS i set position to relative and positioned with “right”.

Here’s my html:

<div class="nav-container">
    <ul class="nav">
    <li class="list"><a class="link" href="#">Link</a></li>
    <li class="list"><a class="link" href="#">Link</a></li>
    <li class="list"><a class="link" href="#">Link</a></li>
    <li class="list"><a class="link" href="#">Link</a></li>
    </ul>
    
    <ul class="nav2">
    <li class="list2"><a class="link2" href="#">Link2</a></li>
    <li class="list2"><a class="link2" href="#">Link2</a></li>
    <li class="list2"><a class="link2" href="#">Link2</a></li>
    <li class="list2"><a class="link2" href="#">Link2</a></li>
    </ul>
    
    <ul class="nav3">
    <li class="list3"><a class="link3" href="#">Link2</a></li>
    <li class="list3"><a class="link3" href="#">Link2</a></li>
    <li class="list3"><a class="link3" href="#">Link2</a></li>
    <li class="list3"><a class="link3" href="#">Link2</a></li>
    </ul>
    </div>   

Here’s my CSS:

.nav-container {position: relative; left: 40%}

.nav {background-color: antiquewhite; padding: 5px; margin-right: 80%; list-style-type: none; }
.list {display: inline;  }
.link {text-decoration: none; padding: 25px; }

.nav2 {background-color:darkgray; padding: 5px; margin-right: 80%; list-style-type: none;}
.list2 {display: inline; }
.link2 {text-decoration: none; padding: 20px;}

.nav3 {background-color: aquamarine; margin-right: 80%; padding: 5px; position: relative; top: -15.6px;}
.list3 {display: inline; }
.link3 {text-decoration: none; padding: 20px;}

There are many ways. These should help:

  1. https://www.w3.org/Style/Examples/007/center.en.html

  2. https://css-tricks.com/centering-css-complete-guide/

1 Like