Javascript 将div垂直中间与父对象一起放置

我想将子元素与父元素垂直放置

贾哈尔
#身体{
字体系列：无衬线，arial，“Roboto”；
}
#外{
宽度：280px；
背景色：白色；
高度：253px；
背景色：#f0；
}
.imgbox{
高度：174px；
宽度：270px；
溢出：隐藏；
显示：表格；
保证金：0自动；
背景色：黑色；
文本对齐：居中；
}
.img_内容{
最大高度：174像素；
最大宽度：270px；
保证金：0自动；
垂直对齐：中间对齐；
显示：表格单元格；
}
.标题栏{
最大宽度：270px；
文本对齐：居中；
}
.头衔{
字号：900；
字体大小：14px；
}
Lorem ipsum Amet

添加以下CSS：

.imgbox {
   height: 174px;
   width: 270px;
   overflow: hidden;
   margin: 0 auto;
   background-color: black;
   text-align: center;
   position: relative;
 } 

.img_content {
   max-height: 174px;
   max-width: 270px;
   position: absolute;
   transform: translate(-50%,-50%);
   top: 50%;
   left: 50%;
 }

使用css3。应在父元素上添加以下css

.parent {
  justify-content: center;
  align-items: center;
  display: flex;
}

#主体{
字体系列：无衬线，arial，“Roboto”；
}
#外{
宽度：280px；
背景色：白色；
高度：253px；
背景色：#f0；
}
.imgbox{
证明内容：中心；
对齐项目：居中；
显示器：flex；
高度：174px；
宽度：270px；
溢出：隐藏；
保证金：0自动；
背景色：黑色；
文本对齐：居中；
}
.img_内容{
最大高度：174像素；
最大宽度：270px；
}
.标题栏{
最大宽度：270px；
文本对齐：居中；
}
.头衔{
字号：900；
字体大小：14px；
}

Lorem ipsum Amet

有很多方法可以做到这一点。您可以将img标记包装在一个div中，并使用类say，wrapper。那么包装器div的样式如下：

.wrapper {
       vertical-align: middle;
       display: table-cell;
}

，然后从图像中删除“显示：表格”单元格和“垂直对齐：中间”

如果您不希望对现有CSS进行任何更改，请使用另一种方式处理fiddle

此外，您可以使用flex（浏览器支持可能是一个问题）或具有translate-Y的旧相对绝对位置。然而，translate-Y需要浏览器前缀以保持一致的性能

---

干杯

将

img

标记包装在

div

中，并将其置于

表格单元格中。Img是一个内联元素，因此它不会工作。不太清楚您的意思，但是如果您想使用
显示：table
，则
#outer
div应该是table，而
。imgbox
应该是带有
垂直对齐：中间
的表格单元格。。