Q: How to make li'images in center of screen(responsive) Basically I want to have a small row with 4 social icons in middle of screen. I wanted to have it middle of screen wheather I am opening my page in mobile, laptop or tab.
I have applied width:50%  but issue is ul li's images are in left side. What I can do is to use media queries for all screen resolution but that will be not good as then for every screen/resolution point I have to make queries which is not good practise.
I think I am missing something easier about this point but I am not getting that. 
You can see my code here
In short : I want to have my all 4 icons in middle of row in every screen(big, small) with fix gap between them.
HTML
<ul class="footerUl">
    <li>
        <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">   
    </li>
    <li>
        <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32"> 
    </li>
    <li>
        <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32"> 
    </li>
    <li>
        <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">   
    </li>
    <div class="clearfix"></div>
</ul>

CSS
.clearfix{clear:both;}
ul li{list-style-type:none;float:left;padding-left:7%;}
ul li:first-child{padding-left:0px !important;}
ul li:last-child{padding-left:0px !important;}
ul{padding-left:0px;width:50%;margin-left:auto;margin-right:auto;}


A: You can simply use flex for doing that.
Review the answer below :


.clearfix{
  clear: both;
}

ul li{
  list-style-type: none;
  float: left;
  padding-left: 20px;
}

ul li:first-child{
  padding-left: 0px !important;
}

ul li:last-child{
  padding-left: 0px !important;
}

ul{
  padding-left: 0px;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.footerUl {
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
}
<ul class="footerUl">
  <li>
    <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">   
  </li>
  <li>
    <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32"> 
  </li>
  <li>
    <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32"> 
  </li>
  <li>
    <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">   
  </li>
  <div class="clearfix"></div>
</ul>



A: I'm not sure if you like this way. But instant I have this idea. 


ul.footerUl{

text-align:center;
}
  
ul li{list-style-type:none;display:inline-block;}
ul li img{ margin:5px 20px;}
<ul class="footerUl">
  <li>
    <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">   
  </li>
  <li>
    <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32"> 
  </li>
  <li>
    <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32"> 
  </li>
  <li>
    <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">   
  </li>
  
</ul>


