DIV位置：固定;水平居中

Question

我试图水平居中包含具有固定位置的SVG文件的DIV，它们都具有“左”和“上”标记的值以便按顺序排列它们。

现在如何获得包含SVG文件（具有TOP和LEFT标签的自定义值）在浏览器中水平居中的DIV，使用FIXED定位标签，因此它不会影响容器的宽度？

所有的CSS代码如下。 （＃gear01-＃gear16是SVG文件的个人ID）

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> 

这应该easely包括IE8。

垂直中心是一个选项，它只是表明您可以管理固定ccontainer内的内容，就像在body标签中的流程中一样。 :)

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/

，如果你想它是在变化的窗口对准的对象可以更改您要

一定要记住一个Ajax文件的内容。