如何实现div内文本垂直居中？红色背景容器对齐问题

你遇到的核心问题是flex布局缺少垂直对齐属性，加上p标签默认边距和line-height设置不当，导致文本无法正确居中甚至溢出容器。以下是具体修复方案：

关键修改步骤 #

1. 给红色背景容器.dropdown-title-container添加垂直对齐属性：

   .dropdown-title-container{
       background-color: #DC3318;
       height: 100%;
       display: flex;
       justify-content: center; /* 水平居中 */
       align-items: center; /* 新增：垂直居中 */
   }
   

2. 重置.dropdown-title的默认边距并调整line-height：

   .dropdown-title{
       font-family: Arial;
       font-weight: bolder;
       font-size: 1.75em;
       margin: 0; /* 移除p标签默认上下边距 */
       /* 删掉line-height: 100%，避免和容器高度冲突 */
   }
   

为什么之前的方法无效？ #

• 你只给.dropdown-title-container设置了justify-content: center（仅控制水平方向），没有设置align-items: center来实现垂直居中；
• <p>标签默认带有margin-top和margin-bottom，会挤压文本空间，导致文本无法贴合容器；
• line-height: 100%会让文本行高和自身字体大小一致，和容器的45px高度不匹配，进一步加剧位置偏移。

修改后，红色容器内的"MENU"文本就能完美实现水平+垂直居中，同时不会溢出容器。

内容的提问来源于stack exchange，提问作者maruan