Html 如何使用CSS将文本垂直对齐成彩色div？

我需要将文本垂直对齐到具有一定高度的div中

如果你到这里，你可以看到我的问题：

如你所见，我有一个标题栏，其中包含以下文字：促进农业投资

标题框的特定高度为40px。我想垂直对齐绿色div中的文本，使其位于中心

这是我的HTML和CSS代码，但效果不好：

<div id="container">


    <div id="titleBox">
        <p id="myTitle">Promoting Investment in Agriculture</p>
    </div>


</div>

#titleBox{
    margin: 0 auto;
    width: 350px;
    background-color: #6da662;
    height: 40px;
    vertical-align: middle;
}



#myTitle{
    /* consente di posizionare un elemento al centro del suo contenitore */
    margin: 0 auto;
    overflow: hidden;
    color: #fff;
    font-size: 16.5px;
    font-weight: bold;
    text-align: center;
}

促进农业投资

#标题栏{
保证金：0自动；
宽度：350px；
背景色：#6da662；
高度：40px；
垂直对齐：中间对齐；
}
#我的头衔{
/*联合国环境保护中心项目许可证*/
保证金：0自动；
溢出：隐藏；
颜色：#fff；
字号：16.5px；
字体大小：粗体；
文本对齐：居中；
}

我该怎么解决

Tnx

---

Andrea

尝试将这些样式添加到

#myTitle

：

vertical-align: middle;
line-height: 40px;

---

尝试将这些样式添加到

#myTitle

：

vertical-align: middle;
line-height: 40px;

---

这里有另一个解决方案-将这些样式添加到您的页面。 您肯定应该熟悉垂直居中的display:table cell属性

#titleBox{
    display:table;
}

#myTitle{
    display:table-cell;
    vertical-align: middle;
}

---

这里有另一个解决方案-将这些样式添加到您的页面。 您肯定应该熟悉垂直居中的display:table cell属性

#titleBox{
    display:table;
}

#myTitle{
    display:table-cell;
    vertical-align: middle;
}

---

如果您想做到真正简洁，您可以在一个元素中完成这一切：

<div id="titleBox">Promoting Investment in Agriculture</div>

---

请参阅fiddle:

如果您想变得非常简洁，您可以在一个元素中完成这一切：

<div id="titleBox">Promoting Investment in Agriculture</div>

---

看小提琴：

WOW似乎很好用！！！我还尝试添加垂直对齐：中间；属性，但我没有使用line height属性。为什么使用它工作？你到底要做什么？Tnx这么多东西似乎工作得很好！！！我还尝试添加垂直对齐：中间；属性，但我没有使用line height属性。为什么使用它工作？你到底要做什么？Tnx所以muchIt值得注意的是，为了水平居中

#myTitle

，您需要带有

显示：table

的父容器，因为

边距：0 auto

将使表格单元格居中。对于垂直居中，表格单元格比行高技巧更通用，特别是对于多行文本。演示：值得注意的是，为了水平居中

#myTitle

，您需要带有

显示：table

的父容器，因为

边距：0 auto

将使表格单元格居中。对于垂直居中，表格单元格比行高技巧更通用，特别是对于多行文本。演示地点：