CSS flex box-如何使用全高背景使项目垂直居中

我试图在垂直居中的框中对齐一些文本，同时确保背景颜色延伸到整个高度

HTML:

当前的实时版本在这里

下面是我希望它看起来像什么的图像：

---

非常感谢您的帮助：

您可以通过将css更改为：

article section.case-study .feature-content {
    align-items: stretch;
    align-content: stretch;
    display: flex;
    padding-top: .35em;
}
article section.case-study .feature-content .feature-visual {
    flex-grow: 1;
    flex-basis: 65%;
}
article section.case-study .feature-content .quote {
    display: flex;
    align-items: center;
    align-self: stretch;
    background: #db6f72;
    color: #FFF;
    flex-basis: 35%;
    flex-grow: 1;
    position: relative;
}
article section.case-study .feature-content .quote .words {
    font-family: "Georgia", serif;
    font-size: 2em;
    font-style: italic;
    line-height: 1.5;
    width: 80%;
}

我添加了display:flex和align items:center to.quote以使其垂直居中，并删除了顶部的填充。单词以避免垂直偏移。

---

注意：如果“弹性方向”为“行”，则“对齐项目”将垂直对齐，而“对齐内容”将水平对齐。当flex direction为column时，情况正好相反。

您可以使用flexbox，也可以使用简单的转换：

article section.case-study .feature-content .quote .words {
    font-family: "Georgia", serif;
    font-size: 2em;
    font-style: italic;
    line-height: 1.5;
    padding-top: 4.5em;
    width: 80%;

    // Add these 3 props:
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

---

您需要进行以下更改，以便将项目与.quote容器的中心对齐：

article section.case-study .feature-content .quote {
    [ ... original settings remin unchanged ... ]
    display: flex;
    flex-direction: column;
    justify-content: center;
}

首先，从你的CSS中删除填充顶部：4.5em，否则Y偏移量将下移

第二，将引用的显示更改为Flex，然后使用Aljt项属性将.Word容器垂直对齐在.Quy容器的中间。显示器：flex；对齐项目：居中；引述

.专题内容{ 对齐项目：拉伸； 对齐内容：拉伸； 显示器：flex； 填充顶部：.35em； } .特色视觉{ 柔性生长：1； 弹性基准：65%； } .引用{ 自我调整：伸展； 背景：db6f72； 颜色：FFF； 弹性基准：35%； 柔性生长：1； 位置：相对位置； 显示器：flex； 对齐项目：居中； } .文字{ 字体系列：佐治亚，衬线； 左：2米； 字号：2em； 字体：斜体； 线高：1.5； 宽度：80%； } 将我们的转化率提高到远远超出预期的水平。

---

右侧块有一个CSS规则，其中包含文本引号，您可以在其中添加此项，以便垂直居中其内容。它使该项本身成为flex容器：

article section.case-study .feature-content .quote {
    [ ... original settings remin unchanged ... ]
    display: flex;
    flex-direction: column;
    justify-content: center;
}

此外，您必须删除此规则中的填充顶部，以避免与中心的垂直偏移：

article section.case-study .feature-content .quote .words {
    font-family: "Georgia",serif;
    font-size: 1.85em;
    font-style: italic;
    line-height: 1.3;
    /* padding-top: 1.25em; */ --> erase / set to zero
    width: 80%;
}

---

如果我的或任何解决方案有助于您的查询，您至少可以添加标记或注释。@Highdef是的，您的回答有助于解决此问题。非常感谢你的帮助。我试图推翻你的答案，但除非我有一定的声誉，否则Stackoverflow不会让我这么做。我将直接评论您的回复，让其他人知道它是有效的！：尽管我认为你可能会给出答案，但无论如何，欢迎你：谢谢@Highdef，这非常有效。我现在感觉很好

article section.case-study .feature-content .quote .words {
    font-family: "Georgia",serif;
    font-size: 1.85em;
    font-style: italic;
    line-height: 1.3;
    /* padding-top: 1.25em; */ --> erase / set to zero
    width: 80%;
}