在div內垂直居中div

Question

我是一個初學者，並嘗試從頭開始嘗試自己的wordpress主題（使用引導程序，剝離所有內容並添加自己的主題）。 現在，我陷入了一個煩人的問題。

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

我意識到這可能很麻煩，幾乎不需要某些東西，並且可以將其剝離掉，但是我已經嘗試自己弄清楚了，這就是我到目前為止所做的。

它的截圖在這里：external 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%;
...