0

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

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

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

提前致谢

4

3 回答 3

2

看起来你需要鼓乐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 Tricks 差异的更多信息——http ://css-tricks.com/old-flexbox-and-new-flexbox/

于 2013-06-19T04:46:29.867 回答
0

如果您知道盒子的大小，则可以使用位置，如下所示：

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;
}

另一种方法，请点击这里。

于 2013-06-19T04:53:50.143 回答
0 
<div id = "centerDiv"></div>

CSS

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

此代码有助于水平居中。

编辑：

试试这个链接。我想这就是你想要的:-)

于 2013-06-19T08:01:57.043 回答