Position DIV: fixe; Centre horizontalement

Question

J'essaye de centrer horizontalement un DIV contenant des fichiers SVG avec la position fixe, ils ont tous des valeurs pour les balises "LEFT" et "TOP" afin de les positionner dans l'ordre. Maintenant comment obtenir le DIV qui contient les fichiers SVG (avec des valeurs personnalisées pour TOP et LEFT tag) centré horizontalement dans le navigateur, en utilisant la balise de positionnement FIXE afin de ne pas affecter la largeur du conteneur?

Tout le code CSS est ci-dessous. (# Gear01- # gear16 sont les ID individuels pour les fichiers SVG)

section.container-gear { 
    margin: 0 auto; 
    padding: 0; 
    width: 970px; 
    position: fixed; 
    top: auto; 
    left: 500px; 
    z-index: -30; 
    border: solid 1px blue; 
} 

Merci à l'avance.

section.container-gear #gear01 { 
    width: 148px; 
    height: 148px; 
    fill: rgba(0, 136, 206, 1); 
    clear: both; 
    position: fixed; 
    top: 192px; 
    left: -35px; 
    z-index: -25; 
} 

section.container-gear #gear02 { 
    width: 148px; 
    height: 148px; 
    fill: rgba(0, 136, 206, 1); 
    clear: both; 
    position: fixed; 
    top: 54px; 
    left: -34px; 
    z-index: -25; 
} 

section.container-gear #gear03 { 
    width: 148px; 
    height: 148px; 
    fill: rgba(0, 136, 206, 1); 
    clear: both; 
    position: fixed; 
    top: 167px; 
    left: 101px; 
    z-index: -25; 
} 

section.container-gear #gear04 { 
    width: 148px; 
    height: 148px; 
    fill: rgba(0, 136, 206, 1); 
    clear: both; 
    position: fixed; 
    top: 29px; 
    left: 102px; 
    z-index: -25; 
} 

section.container-gear #gear05 { 
    width: 148px; 
    height: 148px; 
    fill: rgba(0, 136, 206, 1); 
    clear: both; 
    position: fixed; 
    top: 196px; 
    left: 236px; 
    z-index: -25; 
} 

section.container-gear #gear06 { 
    width: 148px; 
    height: 148px; 
    fill: rgba(0, 136, 206, 1); 
    clear: both; 
    position: fixed; 
    top: 58px; 
    left: 237px; 
    z-index: -25; 
} 

section.container-gear #gear07 { 
    width: 148px; 
    height: 148px; 
    fill: rgba(0, 136, 206, 1); 
    clear: both; 
    position: fixed; 
    top: 171px; 
    left: 372px; 
    z-index: -25; 
} 

section.container-gear #gear08 { 
    width: 148px; 
    height: 148px; 
    fill: rgba(0, 136, 206, 1); 
    clear: both; 
    position: fixed; 
    top: 33px; 
    left: 373px; 
    z-index: -25; 
} 

section.container-gear #gear09 { 
    width: 148px; 
    height: 148px; 
    fill: rgba(0, 136, 206, 1); 
    clear: both; 
    position: fixed; 
    top: 200px; 
    left: 507px; 
    z-index: -25; 
} 

section.container-gear #gear10 { 
    width: 148px; 
    height: 148px; 
    fill: rgba(0, 136, 206, 1); 
    clear: both; 
    position: fixed; 
    top: 62px; 
    left: 508px; 
    z-index: -25; 
} 

section.container-gear #gear11 { 
    width: 148px; 
    height: 148px; 
    fill: rgba(0, 136, 206, 1); 
    clear: both; 
    position: fixed; 
    top: 175px; 
    left: 643px; 
    z-index: -25; 
} 

section.container-gear #gear12 { 
    width: 148px; 
    height: 148px; 
    fill: rgba(0, 136, 206, 1); 
    clear: both; 
    position: fixed; 
    top: 37px; 
    left: 644px; 
    z-index: -25; 
} 

section.container-gear #gear13 { 
    width: 148px; 
    height: 148px; 
    fill: rgba(0, 136, 206, 1); 
    clear: both; 
    position: fixed; 
    top: 204px; 
    left: 778px; 
    z-index: -25; 
} 

section.container-gear #gear14 { 
    width: 148px; 
    height: 148px; 
    fill: rgba(0, 136, 206, 1); 
    clear: both; 
    position: fixed; 
    top: 66px; 
    left: 779px; 
    z-index: -25; 
} 

section.container-gear #gear15 { 
    width: 148px; 
    height: 148px; 
    fill: rgba(0, 136, 206, 1); 
    clear: both; 
    position: fixed; 
    top: 179px; 
    left: 914px; 
    z-index: -25; 
} 

section.container-gear #gear16 { 
    width: 148px; 
    height: 148px; 
    fill: rgba(0, 136, 206, 1); 
    clear: both; 
    position: fixed; 
    top: 41px; 
    left: 915px; 
    z-index: -25; 
} 

Answer 1

vous pouvez utiliser un premier élément en position: fixé comme un conteneur principal, puis mettre à l'intérieur des éléments comme vous le feriez dans le flux. ex: http://codepen.io/gcyrillus/pen/bxKuH

#fixed { 
    position:fixed; 
    height:100%; 
    width:100%; 
    display:table; 
} 
#center { 
    display:table-cell; 
    text-align:center; 
    vertical-align:middle; 
    height:100%; 
    width:100%; 
} 
p { 
    display:inline-block; 
    background:yellow; 
} 

<div id="fixed"> 
    <div id="center"> 
    <p>Center me!</p> 
    </div> 
</div> 

cela devrait inclure easely IE8. Le centre vertical est une option, c'est seulement pour montrer que vous pouvez gérer le contenu à l'intérieur d'un ccontainer fixe, tout comme dans la balise body in flow. :)

Answer 2

Sur la div que vous voulez centrer ajouter: align="center"

Par exemple:

<div align="center"> 
    // content 
</div> 

ou:

margin-left: 50%; 

ou cet extrait jquery:

$('div').css('margin-left', $(window).width()/2-($('div').width()/2)); 

http://jsfiddle.net/nvVb7/

si vous voulez changer l'objet, il est aligné dans le changement de la fenêtre à ce que vous voulez

assurez-vous que vous vous souvenez d'un fichier ajax.