How to center this on screen - html

Question

So as a newbie web developer I am stuck on how to center all 3 images in the middle of the screen. I read up on it and came across margin:auto;. Tried it, didn't work.
This is the CSS:
<style>
.social
{
float:left;
margin:5px;
}
.main_block
{
margin:auto, auto;
}
</style>
This is the HTML:
<div class="main_block">
<img class="social" src="http://lorempixel.com/400/200/"> <a href="#"><img class="social" src="http://lorempixel.com/g/400/200/" alt="Facebook"> <img class="social" src="http://lorempixel.com/400/200/" alt="Google +"> </a>
</div>
Help is much appreciated.

Answer 1

FIDDLE
You need to display the images as block and then apply margin auto
Also your HTML is not correct:
<div class="main_block">
<div class="ib">
<a href="#">
<img class="social" src="http://lorempixel.com/50/50/" />
</a>
<a href="#">
<img class="social" src="http://lorempixel.com/g/50/50/" alt="Facebook" />
</a>
<a href="#">
<img class="social" src="http://lorempixel.com/50/50/" alt="Google +" />
</a>
</div>
</div>
CSS:
.social
{
float: left;
}
.ib {
display: inline-block;
}
.main_block {
text-align: center;
}

Answer 2

I'm not sure if you wanted them to stack over each other, or just to center them.
Stack them over each other
JSFiddle
To stack them over each other, you want to have position:absolute; in the .social tag, that way they won't try to avoid each other. The problem is, margin:auto; won't work then. The only solution I've found to fix this to to set the left: and right: positions to 1%;.
Just center them
JSFiddle
This one is to just center them. You would just want to use margin-left:auto; and margin-right:auto;. With this, you don't need to use position:absolute;.

Answer 3

You have to set a width on the main-block class and remove the comma.
Your style should look something like this:
.main_block
{
width: 40em;
margin:0 auto;
}