Css 容器内多个div中的一个垂直居中

一个部分由一个导航组、一个中间文本组和一个背景图像组成，导航组的元素浮动到两侧。没有手动设置剖面高度以适合背景图像。 如何使文本组垂直居中？它是

div.h1-container

普朗克：

正文{
字体：15px/1.5 Arial，Helvetica，无衬线；
填充：0；
保证金：0；
背景色：#F4；
}
/*全球的*/
.集装箱{
宽度：80%；
保证金：自动；
溢出：隐藏；
}
.清楚{
明确：两者皆有；
}
保险商实验室{
保证金：0；
填充：0；
}
第h2节{
线高：1.0；
}
.按钮1{
高度：34px；
背景：番茄；
边界：0；
左侧填充：20px；
右边填充：20px；
颜色：#ffffff；
宽度：200px；
}
.展示导航a{
颜色：#ffffff；
文字装饰：无；
文本转换：大写；
字体大小：16px；
}
.陈列室导航{
填充顶部：30px；
边缘顶部：10px；
浮动：对；
}
.showcase nav li.social i{
填充：0.4px；
}
.李国荣{
显示：内联；
填充：0 20px 0 20px；
}
.展示品牌{
浮动：左；
}
.展示品牌h1{
字号：26px；
保证金：0；
填充顶部：30px；
颜色：#fff；
}
.展示品牌。突出重点{
颜色：#e8491d；
字体大小：粗体；
}
.展示导航a：悬停{
颜色：#中交；
字体大小：粗体；
}
.h1集装箱{
宽度：70%；
保证金：自动；
}
.h1容器h1{
文本转换：大写；
文本对齐：居中；
颜色：#fff；
}
.h1容器p{
宽度：81%；
背景：番茄；
保证金：自动；
边界半径：10px；
文本对齐：居中；
颜色：#fff；
}
/*展示*/
#展示{
背景：url（'http://i68.tinypic.com/2j5jho4.png")不重复;；
背景尺寸：包含；
宽度：100%；
显示：内联块；
位置：相对位置；
保证金：0自动；
}
#展示：之后{
垫面：51.46%；
显示：块；
内容：''；
}
#展示柜{
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
}
#showcase.h1容器h1{
字体大小：55px；
边缘底部：10px；
}
#展示p{
字体大小：20px；
填充物：5px；
}

标题





第1行的文本
第2行的文本
lorem ipsum lorem ipsum lorem ipsum lorem ipsum

鉴于当前的环境，有两种简单的方法可以做到这一点

一种方法是为

.h1容器提供
显示：flex
，
灵活方向：column
，以及
调整内容：center

这是一本书

但是，如果这样做，则放置在
.h1容器
中的每个元素和每个新元素最终将垂直堆叠，并相对于
.h1容器
垂直居中，因此，如果
.h1容器
未正确居中，则子元素似乎未居中

还请记住，
justify content
始终将子元素相对于弹性框的方向定位。因此，如果未明确设置曲轴箱方向，并且由于默认设置为
曲轴箱方向：行
，
调整内容
将水平定位子项<代码>对齐项目
将始终与flex box的方向属性相反


正文{
字体：15px/1.5 Arial，Helvetica，无衬线；
填充：0；
保证金：0；
背景色：#F4；
}
/*全球的*/
.集装箱{
宽度：80%；
保证金：自动；
溢出：隐藏；
}
.清楚{
明确：两者皆有；
}
保险商实验室{
保证金：0；
填充：0；
}
第h2节{
线高：1.0；
}
.按钮1{
高度：34px；
背景：番茄；
边界：0；
左侧填充：20px；
右边填充：20px；
颜色：#ffffff；
宽度：200px；
}
.展示导航a{
颜色：#ffffff；
文字装饰：无；
文本转换：大写；
字体大小：16px；
}
.陈列室导航{
填充顶部：30px；
边缘顶部：10px；
浮动：对；
}
.showcase nav li.social i{
填充：0.4px；
}
.李国荣{
显示：内联；
填充：0 20px 0 20px；
}
.展示品牌{
浮动：左；
}
.展示品牌h1{
字号：26px；
保证金：0；
填充顶部：30px；
颜色：#fff；
}
.展示品牌。突出重点{
颜色：#e8491d；
字体大小：粗体；
}
.展示导航a：悬停{
颜色：#中交；
字体大小：粗体；
}
.h1集装箱{
宽度：70%；
保证金：自动；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
.h1容器h1{
文本转换：大写；
文本对齐：居中；
颜色：#fff；
}
.h1容器p{
宽度：81%；
背景：番茄；
保证金：自动；
边界半径：10px；
文本对齐：居中；
颜色：#fff；
}
/*展示*/
#展示{
背景：url（'http://i68.tinypic.com/2j5jho4.png")不重复;；
背景尺寸：包含；
宽度：100%；
显示：内联块；
位置：相对位置；
保证金：0自动；
}
#展示：之后{
垫面：51.46%；
显示：块；
内容：''；
}
#展示柜{
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
}
#showcase.h1容器h1{
字体大小：55px；
边缘底部：10px；
}
#展示p{
字体大小：20px；
填充物：5px；
}

标题





第1行的文本
第2行的文本
lorem ipsum lorem ipsum lorem ipsum lorem ipsum

@RamonMarques将Div水平居中比垂直居中容易得多我不认为这两篇文章是重复的我的问题是将内部文本组垂直居中而不是水平居中。@ElAnonimo实际上可能还有另一种方法，如果您不介意将
.h1容器中的所有内容垂直居中。我会调整我的工作