Html 将文本块垂直居中放置在“中”；卡片“；使用flexbox不起作用

我正在制作一张翻页卡片

卡片的正面显示一张照片，而背面显示一块文本，如果垂直居中于卡片上，效果会更好

*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.flip_容器{
宽度：300px；
高度：450px；
边框：1px实心#ccc；
}
.flip_容器img{
宽度：100%；
高度：自动；
}
.flip_容器：悬停。翻转{
-webkit变换：旋转（180度）；
变换：旋转（180度）；
}
.翻转{
-webkit转换：0.5s；
过渡：0.5s；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
位置：相对位置；
}
.正面翻转，
.向后翻{
-webkit背面可见性：隐藏；
背面可见性：隐藏；
位置：绝对位置；
排名：0；
左：0；
}
.翻面{
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
.向后翻{
-webkit变换：旋转（180度）；
变换：旋转（180度）；
填充：10px；
背景：#fff；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
.向后翻转{
边际上限：0；
文本对齐：居中；
}
.向后翻{
文本对齐：对齐；
字体系列：Arial，无衬线；
线高：1.5；
}

罗勒姆假头衔
我们使用HTML Ipsum工具将Lorem Ipsum提升到了一个新的水平。如您所见，此Lorem Ipsum是为基于HTML的网站和其他在线项目量身定制的。大多数网页设计项目一开始都使用Lorem Ipsum摘录。

您忘记了弯曲图元不再是块图元，它们不能覆盖其父图元的整个高度

将

高度：100%

添加到您的

.flip

&

.flip back

类：

*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.flip_容器{
宽度：300px；
高度：450px；
边框：1px实心#ccc；
}
.flip_容器img{
宽度：100%；
高度：自动；
}
.flip_容器：悬停。翻转{
-webkit变换：旋转（180度）；
变换：旋转（180度）；
}
.翻转{
-webkit转换：0.5s；
过渡：0.5s；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
位置：相对位置；
身高：100%；
}
.正面翻转，
.向后翻{
-webkit背面可见性：隐藏；
背面可见性：隐藏；
位置：绝对位置；
排名：0；
左：0；
}
.翻面{
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
.向后翻{
-webkit变换：旋转（180度）；
变换：旋转（180度）；
填充：10px；
背景：#fff；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
身高：100%；
}
.向后翻转{
边际上限：0；
文本对齐：居中；
}
.向后翻{
文本对齐：对齐；
字体系列：Arial，无衬线；
线高：1.5；
}

罗勒姆假头衔
我们使用HTML Ipsum工具将Lorem Ipsum提升到了一个新的水平。如您所见，此Lorem Ipsum是为基于HTML的网站和其他在线项目量身定制的。大多数网页设计项目一开始都使用Lorem Ipsum摘录。

您忘记了弯曲图元不再是块图元，它们不能覆盖其父图元的整个高度

将

高度：100%

添加到您的

.flip

&

.flip back

类：

*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.flip_容器{
宽度：300px；
高度：450px；
边框：1px实心#ccc；
}
.flip_容器img{
宽度：100%；
高度：自动；
}
.flip_容器：悬停。翻转{
-webkit变换：旋转（180度）；
变换：旋转（180度）；
}
.翻转{
-webkit转换：0.5s；
过渡：0.5s；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
位置：相对位置；
身高：100%；
}
.正面翻转，
.向后翻{
-webkit背面可见性：隐藏；
背面可见性：隐藏；
位置：绝对位置；
排名：0；
左：0；
}
.翻面{
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
.向后翻{
-webkit变换：旋转（180度）；
变换：旋转（180度）；
填充：10px；
背景：#fff；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
身高：100%；
}
.向后翻转{
边际上限：0；
文本对齐：居中；
}
.向后翻{
文本对齐：对齐；
字体系列：Arial，无衬线；
线高：1.5；
}

罗勒姆假头衔
我们使用HTML Ipsum工具将Lorem Ipsum提升到了一个新的水平。如您所见，此Lorem Ipsum是为基于HTML的网站和其他在线项目量身定制的。大多数网页设计项目一开始都使用Lorem Ipsum摘录。

无需对

正面

分区使用

位置：绝对

，并使用

对齐项目：居中

和

底部：0

至

背面

分区对齐居中

堆栈片段

*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.flip_容器{
宽度：300px；
高度：450px；
边框：1px实心#ccc；
}
.flip_容器img{
宽度：100%；
高度：自动；
}
.flip_容器：悬停。翻转{
-webkit变换：旋转（180度）；
变换：旋转（180度）；
}
.翻转{
-webkit转换：0.5s；
过渡：0.5s；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
位置：相对位置；
}
.正面翻转，
.向后翻{
-webkit背面可见性：隐藏；
背面可见性：隐藏；
}
.翻面{
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
.向后翻{
-w