Html 如何在父div中垂直居中文本，在响应布局中有两列

我是说；） 从这个例子中：

我有一个反应灵敏的布局，有两列

我必须垂直居中左div文本“lorem ipsum”

在这种情况下，最好的解决方案是什么

#parent{
position:absolute;
right: 20%;
width: 45%; /* 60% if you include the padding-left */
padding-left: 15%;
background-image: url('x.png');
text-align: right;
background-color: #ddd;
}

---

您可以使用

：before

或

：after

伪选择器使其垂直居中，如下所示：

#父级{
位置：绝对位置；
右：20%；
宽度：45%；/*60%（如果包含左侧填充）*/
左：15%；
背景图片：url（'x.png'）；
文本对齐：右对齐；
背景色：#ddd；
}
#边际{
空白：nowrap；
宽度：15%；
身高：100%；
右侧填充：12px；
位置：绝对位置；
左：0；
排名：0；
底部：0；
背景色：#999；
背景图片：url（'y.png'）；
}
#保证金：之前{
显示：内联块；
垂直对齐：中间对齐；
溢出：隐藏；
保证金：0-5px；
身高：100%；
宽度：1px；
内容：''；
}
#文本保持器{
垂直对齐：中间对齐；
显示：内联块；
空白：正常；
}

乱数假文。
Lorem ipsum dolor sit amet，是一位杰出的献身者。奥迪奥·利奥的顿涅克，埃古斯塔斯·阿库。这是一个很好的例子。

一种方法可能在您的

#margin

元素上

#margin{
    width: 15%;
    height: 100%;
    padding-right: 12px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #999;
    background-image: url('y.png');

    /* New code to center vertically... */
    display: flex;
    align-items: center; 
}

align items

属性定义柔性容器内项目的默认对齐方式

---

您可以查看一个示例。

这很有效，很好。如果我删除“LROM IPSUM”，只写“LROM”，文本向左移动，不乱数假文。也可以水平居中？是的，您可以添加

justify content:center也定义主轴上的对齐。我的要求不同。我们必须将左div与两列不同背景的响应设计对齐。这不是一回事。感谢您的帮助，此解决方案也很有效。@Giamp（不客气）