Position Fixed Horizontal Centering In CSS

Question

I want div to be center horizontally with position fixed but it don't in my code: How is it?

DEMO: https://output.jsbin.com/rawabeguri/1

HTML:

<div id="fancybox-thumbs" class="bottom" style="width: 675px;">
    <ul style="/* left: 633px; */">
        <li class=""><a style="width: 77px; height: 52px;" href="javascript:jQuery.fancybox.jumpto(1);"><img src="http://up.grdagrd.com/uploads/b1cf3b464aa26e0dd4cc2e3fabeae20a_80.jpg" style="width: 75px; height: 56px; top: -3px; left: 0px;"></a></li>
        <li class=""><a style="width: 77px; height: 52px;" href="javascript:jQuery.fancybox.jumpto(2);"><img src="http://up.grdagrd.com/uploads/d1c559d01ca52cc040e6d84fbd22a73c_80.jpg" style="width: 60px; height: 80px; top: -15px; left: 7px;"></a></li>
        <li class=""><a style="width: 77px; height: 52px;" href="javascript:jQuery.fancybox.jumpto(3);"><img src="http://up.grdagrd.com/uploads/076f90e118858482b7ad97fa6106b2b6_80.jpg" style="width: 60px; height: 80px; top: -15px; left: 7px;"></a></li>
    </ul>
</div>

CSS:

#fancybox-thumbs {
    position: fixed;
    height: 55px;
    overflow: hidden;
    z-index: 8050;
    position: fixed;
}
#fancybox-thumbs ul {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
}
#fancybox-thumbs ul li.active {
    padding: 0;
    border: 1px solid #fff;
}
#fancybox-thumbs ul li {
    float: left;
    padding: 1px;
}

Answer 1

Since your fancybox-thumbs div is 675px by width, just add left = 50% and pull it back with a negative margin-left:

#fancybox-thumbs {    
    height: 55px;
    overflow: hidden;
    z-index: 8050;
    position: fixed;
    width: 675px;
    left: 50%;
    margin-left: -337.5px;
}

Answer 2

If you add margin:auto; to the div's css it should horizontally align the div

Answer 3

i just try change css

#fancybox-thumbs {
position: fixed;
height: 55px;
overflow: hidden;
z-index: 8050;
width: 100% !important;
top: 45%;
text-align: center;

}