Question

在css样式中 margin：0px auto; 是x轴中元素的中心。

但我希望中心在y轴上相同。

     ^
     |
     |
<----E---->
     |
     |
     v

提前致谢

Answer 1

看起来你需要 drumroll FLEXBOX !!!在父元素上设置以下样式，同时保持子元素具有明确定义的宽度margin: 0 auto;

.parent {
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

检查出来：http://jsfiddle.net/6j5Ah/

希望你使用一个甜蜜的新浏览器，因为这不适用于爷爷的浏览器（http://caniuse.com/#search=flexbox）。

在HTML5rocks.com上阅读超过我希望了解的内容：http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center

另外请记住，规格在flexbox周围有所改变，并且有一个新的语法。我发布的是旧的（2009）语法，因为它有更广泛的支持。随着浏览器走向未来，这种情况将会发生变化。您可以找到有关CSS技巧差异的更多信息 - http://css-tricks.com/old-flexbox-and-new-flexbox/

Answer 2

如果你知道盒子的大小，你可以使用这个位置，如下：

HTML

<div class="center"></div>

CSS

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: height /2;
  margin-left: width / 2;
  width: ... px;
  height: ...px;
}

另一种方法，请点击here。

Answer 3

<div id = "centerDiv"></div>

CSS

#centerDiv
{
  width: 200px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

此代码有助于水平居中。

编辑：

试试这个link。我想这就是你想要的： - ）

在中心位置css设置一个元素

3 个答案:

HTML

CSS