在 div 内垂直居中 div

Question

我是一名初学者，正在尝试从头开始创建自己的 wordpress 主题（使用引导程序，剥离所有内容并添加自己的主题）。现在我遇到了一个烦人的问题。

我有一个 div，其中包含 3 个较小的 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。

更新：解决方案是摆弄 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%;
...