Question

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

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

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

你可以在位置使用第一个元素：固定为主容器，然后像在流程中一样设置内部元素。例如：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是一个选项，它只是表明你可以管理固定ccontainer中的内容，就像在body标签中的流程一样。：）

DIV位置：固定;水平居中

2 个答案: