在div中垂直居中div

Question

我是一个初学者，并试图从头开始添加我自己的wordpress主题(使用bootstrap，剥离所有内容并添加我自己的主题)。现在我被一个烦人的问题卡住了。

我有一个包含3个较小div的div，这些div将作为图像的菜单项。与外部div相比，我将3设置为水平居中，而不是垂直居中。

我已经将内部的div设置为和外部的一样高，但是我不能让内部的内容也垂直居中。

这是我的代码: HTML

​

#menu {
  margin: 0 auto;
  width: 60%;
  height: 300px;
}

div.menu_item {
  display: inline-block;
  height: 100%;
}

div.menu_item img {
  -webkit-border-radius: 15px;
  border: 1px solid #CCC;
  border-radius: 15px;
  clear: both;
  height: 150px;
  margin: 4px 15px;
  padding: 10px;
  width: 150px;
}

<div id="menu">
  <div class="menu_item">
    <p>
      <a title="" href="myimg"><img alt="" src="/myimg.png" width="125" height="125" /></a>
    </p>
  </div>
  <div class="menu_item">
    <p>
      <a title="" href="myimg"><img alt="" src="/myimg.png" width="125" height="125" </a></p>
  </div>
  <div class="menu_item">
    <p>
      <a title="" href="myimg"><img alt="" src="/myimg.png" width="125" height="125" </a></p>
  </div>
</div>

​

我意识到这可能会非常混乱，而且几乎可以肯定有些东西是不需要的，可能会被剥离，但我已经试着自己弄清楚，这就是我到目前为止所取得的成果。

它的屏幕截图在这里:外部div

​

内部div中的一个

​

第一个显示外部div，第二个显示一个内部div。

更新:解决方案就是摆弄flexbox，这对我来说也很简单。此外，我尝试尽可能多地从CSS中剥离，但仍然有相同的结果，显然几乎不需要任何代码。

这现在是我的CSS了

 #menu
{
    margin:0 auto;
    width:60%;
    height:300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

这使得#menu的内容在垂直和水平方向上都居中。

Answer 1

这应该是可行的：

div.menu_item
{
    width: X%; /*change to display: table; if you're targeting IE8 or greater, requires !DOCTYPE */
    margin: 0 auto;
    ...
}

width必须小于外部的div，我把X用来表示百分比。

height也可以做到这一点

...
height: X%;
...