垂直居中div内的div

Question

我是初学者并尝试从头开始使用我自己的wordpress主题（使用bootstrap，剥离所有内容并添加我自己的）。现在我陷入了一个恼人的问题。

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

我已将内部div设置为与外部div一样高，但我无法使内部内容也垂直居中。

这是我的代码： HTML

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我意识到这可能非常混乱，几乎可以肯定某些事情是不需要的，可能会被剥夺，但我试图为自己解决这个问题，这就是我到目前为止所做的事情。

它的屏幕截图在这里： 外部的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%;
...