Why won't these social buttons centre in responsive design?

Question

We've manually programmed Twitter, Facebook and G+ buttons on our site which uses responsive design in a ajax portfolio. They all align with each other perfectly but the problem is we want all 3 to be centred no matter what the size of the surrounding container.

In my head this should work easily with a surrounding Div that has 100% width to expand to the portfolio size, inside that another Div which has margin-left and margin-right as auto which floats centrally to the 100% width div and then inside of that div the containers for the buttons. However for some reason they always hard align to the left. Here is my code at the moment.

Here is an example

http://themixtapesite.com/#/joe-budden-a-lose-quarter 

now change your browser window to make it smaller so you can dynamically see all the different sizes - I want those social buttons to float centred in the middle rather than on the left like they are now..

<!-- Social sharing buttons -->
    <div class="social-single">

    <div class="social-centre">     

    <div class="twit-button"><a href="https://twitter.com/share" class="twitter-share-button" data-via="mixtapes_4_free" data-lang="msa" data-related="realdannys" data-hashtags="mixtape">Tweet</a></div>

    <div class="fb-button"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;title=<?php wp_title( '|', true, 'right' ); ?>&amp;send=false&amp;layout=button_count&amp;width=71&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=118471234925480" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width: 71px; height: 21px;" allowTransparency="true"></iframe>
                        </div>

    <div class="gplus-button"><g:plusone href="<?php echo urlencode(get_permalink($post->ID)); ?>" size="medium" annotation="bubble" width="50px"></g:plusone></div>

    </div> </div>

And the CSS

/* Social Buttons */

.social-single {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
width:  100% !important;
}

.social-centre
{
margin-left: auto;
margin-right: auto;
}

.twit-button {
float:  left;
margin: 0;
margin-right: 5px;
width: 80px;
}

.fb-button {
float: left;
margin: 0;
width: 80px;
}

.gplus-button {
float: left;
margin: 0;
width: 50px;
}

Answer 1

You have already used margin-left: auto; and margin-right:auto; it is good. You have all things set in the way of responsiveness. But one thing that browser checks for every element, its width as well as height . We should define these values separately, otherwise it'll assume it without having any child element inside it.

I've checked your code and as i think you will have to add only one thing - give .social-centre class width whatever you want but it would be good if it is in %'s for its responsiveness.

.social-centre
{
margin-left: auto;
margin-right: auto;
width:50%; //example, whatever you want.
} 

And it'll work properly. Hope it'll help you.