Unable to horizontally center my list (containing an image) - html

Question

I have two lists that's location I would like to move as the screen size gets smaller. When the screen reaches 327px in length, I would like the "headlogo" to be centered on the screen, and everything else exactly as it is... how do I do this?
#charset "utf-8";
/* CSS Document */
body {
margin: 0;
padding: 0;
background-color: #DDDCDC;
}
ul {
list-style-type: none;
}
li {
display: inline;
padding: 10px;
}
.secondlist {
margin-top: 30px;
}
#headlogo {
width: 80px;
margin-left: 10px;
margin-top: 10px;
}
.firstlist {
position: relative;
float: left;
}
.secondlist {
position: absolute;
right: 0;
margin-right: 50px;
margin-top: 50px;
z-index: 2;
}
li#about {
width: 5px;
}
#media only screen and (max-width: 610px) {
.firstlist {
position: relative;
float: left;
}
.secondlist {
position: relative;
right: 0;
margin-right: 50px;
margin-top: 50px;
z-index: 2;
text-align: center;
}
li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
li.listli {
line-height: 30px;
}
#headlogo {
width: 80px;
margin-left: 10px;
margin-top: -22px;
}
}
#media only screen and (max-width: 424px) {
#headlogo {
margin-top: -3px;
}
}
#media only screen and (max-width: 394px) {
#headlogo {
margin-top: 7.5px;
}
}
#media only screen and (max-width: 327px) {
#centerme {
display: inline-block;
position: relative;
top: 30px;
}
.firstlist {
float: none;
display: block;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
li.listli {
position: relative;
top: -10px;
}
}
<div id="centerme">
<ul class="firstlist">
<a class="alist" href="http://www.coopertimewell.com">
<li class="listl" id="image">
<img id="headlogo" src="images/logotestme.png" />
</li>
</a>
</ul>
</div>
<ul class="secondlist">
<a class="alist" href="#">
<li class="listli" id="home"><strong>HOME</li></a>
<a class = "alist" href = "http://www.coopertimewell.com/about"><li class = "listli" id = "about">ABOUT ME</li></a>
<a class = "alist" href = "http://www.coopertimewell.com/work"><li class = "listli" id = "work">PORTFOLIO</li></a>
<a class = "alist" href = "http://www.coopertimewell.com/contact"><li class = "listli" id = "contact">CONTACT</li></a>
</ul>

Answer 1

If you would only center it horizontally u have to edit #center in the 'max-width: 327px' query to the following:
#centerme {
display: block;
position: relative;
top: 30px;
width: 100%;
text-align: center;
}
I made the #center div a 100% width and set the text-align to center, which affects the image also. So this way you can center the image horizontally.
Or if you would center it horizontally and vertically you can use:
#centerme {
display: block;
position: relative;
top: 50%;
transform: translateY(50%);
-webkit-transform: translateY(50%);
width: 100%;
text-align: center;
}
With the same code from above I added
top: 50%;
transform: translateY(50%);
to center it horizontally.
Goodluck!

Answer 2

This should centre it below 327px;
#media (max-width: 327px){
#headlogo{
display: block;
margin: 0 auto
}
}
Check this out for more info

Answer 3

You can do
#media (max-width: 327){
#headlogo{
//with your code her//
}
}
Or you can use a new css file with media added
<link rel="stylesheet" media="screen and (max-width: 327px)" href="small.css/>
With this line you can add a complete new css if your screen will be 327px or smaller.