DIV位置：固定； 水平居中

Question

我试图将包含固定位置SVG文件的DIV水平居中，它们都具有“ LEFT”和“ TOP”标签的值，以便按顺序放置它们。

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

所有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

在要居中的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文件。

Answer 2

您可以在position：fixed中使用第一个元素作为固定容器，然后像在流程中那样在元素内部进行设置。 例如： 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。

vertical-center是一个选项，仅表示您可以在固定c容器内管理内容，就像在body标签中的流程一样。 :)