如何在Flex布局中实现单行/两行文本的垂直对齐？

我来帮你搞定这个Flexbox对齐的小难题！你现在的情况是：单行文本没法在50px高的容器里垂直居中，但设置align-items: center后，多行文本又会整体居中，不符合需求。试试下面这个方案：

修改后的CSS代码 #

.crp_related .crp_title {
    border-radius: 0px !important;
    font-weight: 600;
    background-color: #4E64DD !important;
    height: 50px;
    display: flex;
    flex-direction: column; /* 改为列方向布局 */
    text-align: center;
    overflow: hidden;
    line-height: 1.5;
    position: absolute;
    padding: 4px 0;
    justify-content: space-between; /* 让子元素在垂直方向均匀分布 */
}

.crp_related .crp_title::before,
.crp_related .crp_title::after {
    content: "";
    flex: 1; /* 让两个伪元素平分容器内的剩余垂直空间 */
}

原理说明 #

这个方法的核心是利用Flexbox的列布局特性，配合两个伪元素来填充空间：

• 当文本是单行时，::before和::after会自动平分容器内的剩余垂直空间，把文本稳稳地挤到容器中间，实现垂直居中。
• 当文本是多行时，文本本身的高度会占据容器内的大部分空间，两个伪元素的高度会被压缩到最小，文本自然从顶部开始排列，超出容器的部分会被overflow:hidden隐藏，完全符合你的需求。

另外，你原来的flex-flow: unset和align-items: unset可以直接去掉，不会影响效果~

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