How to dispaly the logo icon at the center for all device width?

Question

I have the following Html Markup in my website:

<div id="header">
    <div class="flyoutMenuButtons visible-phone">
        <a href="#navigation" class="open-menu"><i class="icon-reorder icon-3x"></i></a>
        <a href="#" class="close-menu"><i class="icon-reorder icon-3x"></i></a>
    </div>
    <div id="logo_and_search">
        <a id="logo" href="/" title="abc">
            <img src="abc.png" height="40" width="136">
        </a>                  
    </div>
</div>

I would like the logo to be diaplayed in center for all device widths. What style shall I apply to the "#logo" element in order make it display in center for all devices other than desktops and tablets?

Answer 1

use like this:

a#logo{
display: block;
text-align: center;
}
a#logo img{
display: inline-block;
}

Answer 2

something like this but if you give fiddle example it be fine

#logo_and_search {
width:100%;
}

#logo {
display: block;
margin: 0 auto;
}

Answer 3

#logo {
    display: block;
    width:136px; /* the same as the logo*/
    margin: 0 auto;
}