中心小div垂直和水平 [英] Center small div in big div vertically and horizontally

问题描述

我的代码如下：

<div id="bigDiv">
  <div id="smallDiv">DD</div>
</div>

我的CSS如下：

#bigDiv {
  border: 1px solid red;
  height: 300px;
  width: 300px;
  vertical-align: middle;

}

#smallDiv {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  margin: 0 auto;
}

我想将小div垂直和水平放置在大div中。水平工程，但垂直工程不行。

I want to center the small div vertically and horizontally inside the big div. The horizontal works, but the vertical doesn't.

http： //jsfiddle.net/4Gjxk/

推荐答案

我相信这是最直接的解决方案， CSS的数量。由于100/300 =〜.33，您可以使用33％的保证金，例如：

I believe this is the most straight-forward solution with the least amount of CSS. Since 100 / 300 = ~.33 you can use a 33% margin like so:

#bigDiv {
  border: 1px solid red;
  height: 300px;
  width: 300px;
}

#smallDiv {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  margin: 33%;
}

这是 updated jsFiddle 。

这篇关于中心小div垂直和水平的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！