Html 在父对象内安装衬垫以进行垂直居中

我想我基本上在那里。我有一个高度为200像素的DIV和一个高度为150像素的内部DIV。这给我留下了50像素的图像标题。然后我想将文本垂直居中放置在剩余的50px内

。标题为{
宽度：300px；
高度：200px；
显示器：flex；
利润率：10px；
背景色：#FFFFFF；
边框：实心4px#000000；
边界半径：0；
框大小：边框框；
溢出：隐藏；
}
.标题为{
宽度：100%；
保证金：0；
}
.预览{
高度：150像素；
宽度：100%；
}
.预览图像{
高度：100px；
最大宽度：100%；
边缘顶部：25px；
边缘底部：25px；
}
.info{
填充物：5px；
框大小：边框框；
高度：50px；
}
.info内部{
框大小：边框框；
}
.姓名{
字体系列：“Roboto”，无衬线；
字体大小：25px；
显示：块；
边际上限：0；
页边距底部：0；
线高：1；
溢出包装：任何地方；
}

谷歌

只需使用

display:flex

和

align items:center

垂直对齐文本即可

同样，正如您在

类中给出的
框大小：边框框
。标题为

的类，因此它将包括边框以及200px的高度，这意味着

容器高度+上边框+下边框=200px

因此，

.preview

容器的高度应为

150px-上边框（即4px）=146px

，对于

.internal

容器，其高度应为

50-4=46px

这对你有用。

。标题为{
宽度：300px；
高度：200px；
显示器：flex；
利润率：10px；
背景色：#FFFFFF；
边框：实心4px#000000；
边界半径：0；
框大小：边框框；
溢出：隐藏；
}
.标题为{
宽度：100%；
保证金：0；
}
.预览{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：146px；
宽度：100%；
}
.预览图像{
高度：100px；
最大宽度：100%；
}
.info{
显示器：flex；
对齐项目：居中；
框大小：边框框；
高度：46px；
}
.info内部{
框大小：边框框；
}
.姓名{
字体系列：“Roboto”，无衬线；
字体大小：25px；
显示：块；
边际上限：0；
页边距底部：0；
线高：1；
溢出包装：任何地方；
}

谷歌

不要使用填充物来居中项目…有更好的方法包括flexbox。我不使用填充物居中，填充物用于主外框内，以便文本不会接触边缘。实际图像的高度总是相同的，所以对于@Paulie的使用，边距就足够了_D@learningtoanimate我再次编辑了它，这将适用于u，保持高度200px，正如您前面提到的，我今天将测试它，也只处理其他元素@Ac_mmi没有使用所有这些，但它足以设置与flex的对齐，谢谢。