Javascript 垂直对齐div中的文本垂直对齐don'；行不通 所以我想把一个文本放在中间。 我看了一半的网站，看起来我必须这样做： .container{ width:100px; height:200px; display:table-cell; vertical-align: middle; line-height: normal; }

但它不起作用

我是这样做的：

HTML:

<>但是我仍然有文本在中心，而不是在div./p>的中间。 我不明白为什么，我尝试在.text\u菜单按钮上插入垂直对齐，但仍然没有：x

---

Thx

容器应具有

显示：表格

和。菜单底部

显示：表格单元格

使用CSS应用类似于表的行为

HTML

<div class="container">
    <div id="left_bot" class="menu_button"><span class="text_menu_button">Div1</span>
    </div>
</div>

---

演示：

垂直居中文本的一种简单方法是将行高设置为与高度相等

div { font-size: 30px; line-height: 100px; height: 100px; }

---

演示：

您可以使用flexbox，答案已经存在于此-是

是的，对不起，是相同的，我只有4个div。和@EugeneObrezkov我看了答案，但我不明白为什么它不起作用。。。垂直对齐应该做到这一点，但他什么也不做…@user3241192更清楚地阅读下面提供的答案。您必须设置
display:flex
，
align items:center
和
justify content:center
。好的，这就是问题所在。。。我没有添加显示：表；我不明白我们为什么要这么做，但我会上网看看。谢谢你的时间
<div class="container">
    <div id="left_bot" class="menu_button"><span class="text_menu_button">Div1</span>
    </div>
</div>

.container {
    height:200px;
    display:table;
    width: 100%;
}
.menu_button {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    font-size: 48px;
}

div { font-size: 30px; line-height: 100px; height: 100px; }