Позиция DIV: фиксированная; Center Horizontally

Question

Я пытаюсь горизонтально центрировать DIV, содержащий файлы SVG с фиксированной позицией, все они имеют значения для тега «LEFT» и «TOP», чтобы упорядочить их.

Теперь как получить DIV, который содержит файлы SVG (с пользовательскими значениями для тегов TOP и LEFT), расположенных по горизонтали в браузере, используя тег позиционирования FIXED, чтобы он не влиял на ширину контейнера?

Весь код CSS приведен ниже. (# gear01- # gear16 - индивидуальные идентификаторы файлов SVG)

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

Заранее спасибо.

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

Вы можете использовать первый элемент в положении: фиксированный как основной контейнер, а затем установить внутренние элементы, как в потоке. например: 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> 

это должно Исли включать IE8.

Вертикальный центр - это опция, это означает, что вы можете управлять содержимым внутри фиксированного контейнера, как в тесте тега тела. :)

Answer 2

На DIV вы хотите центрировать добавить: align="center"

Например:

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

или:

margin-left: 50%; 

или это JQuery фрагмент кода:

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

http://jsfiddle.net/nvVb7/

, если вы хотите изменить объект это выровненный в изменении окна, что вы хотите

убедитесь, что вы помните об АЯКС файл.