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

您可以使用 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 是一个选项，它只是表明您可以像在 body 标记中的流中一样管理固定 ccontainer 中的内容。 :)

Answer 2

在要居中的 div 上添加：align="center"

例如：

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

或：

margin-left: 50%;

或者这个 jquery sn-p:

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

http://jsfiddle.net/nvVb7/

如果您想更改它对齐的对象，请将窗口更改为您想要的对象

确保你记住了一个 ajax 文件。