Html 使用CSS垂直对齐div中的图像

我正在尝试垂直对齐

div

中的图像。我有一个显示彩色背景的

div

，我需要在该

div

内放置其他对象，但要垂直居中

我用小提琴试着解释

---

要垂直居中子元素，只需为元素直接父元素添加

显示：flex

和

对齐项：居中

，其所有子元素将垂直居中

使用您的标记将类似于（也从样式中删除了负数

上边距
）：


#包装器新建{
宽度：100%；
}
#记录科{
宽度：100%；
浮动：左；
身高：100%；
边框底宽：1px；
边框底部样式：实心；
边框底色：#333；
高度：80px；
}
#客房部{
宽度：20%；
背景色：#E9E9E9；
显示：内联块；
浮动：左；
高度：80px；
}
.方向图{
边缘顶部：8px；
垂直对齐：中间对齐；
背景重复：无重复；
背景图片：url(https://s2.postimg.org/te7o9w9ix/orbitor_small_17.png);
}
.房间名称{
字体系列：塔荷马，日内瓦，无衬线；
字体大小：30px；
字体大小：粗体；
颜色：#006；
/*删除显示：内联块*/
显示：flex；/*新*/
对齐项目：居中；/*新建*/
/*移除边缘顶部：-60px*/
左边距：100px；
宽度：200px；
浮动：左；
右边距：30px；
}
.楼层名称{
字体系列：塔荷马，日内瓦，无衬线；
字号：26px；
字体大小：粗体；
颜色：#666；
}

盒
地
如果不想使用flexbox（旧浏览器不支持），可以添加行高：100px（或其他数字）（如果父级具有高度
100px
）


.box{
高度：100px；
宽度：100px；
颜色：白色；
背景色：红色；
线高：100px；
}

框内文本
试试flexbox:


盒
地
.包装纸{
宽度：200px；
高度：200px；
显示器：flex；
对齐项目：居中；
背景色：#FFFFFF；
}

您可以通过将包装器的“对齐项目”属性更改为“居中”来更改内部项目的垂直对齐方式。
首先，您应该去掉
中的
页边距顶部：-60px
。然后有两个文本，而不仅仅是一个。看看下面的设置，我认为这可能是您想要的（？）居中的基本部分是相对位置，to:50%和transform:translatey（-50%），还有背景图像的背景位置


#包装器新建{
宽度：100%；
}
#记录科{
宽度：100%；
浮动：左；
身高：100%；
边框底宽：1px；
边框底部样式：实心；
边框底色：#333；
高度：80px；
}
#客房部{
宽度：20%；
背景色：#E9E9E9；
显示：内联块；
浮动：左；
高度：80px；
}
.方向图{
显示：内联块；
背景重复：无重复；
背景图片：url(https://s2.postimg.org/te7o9w9ix/orbitor_small_17.png);
背景位置：0中心；
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
}
.房间名称{
字体系列：塔荷马，日内瓦，无衬线；
字体大小：30px；
字体大小：粗体；
颜色：#006；
显示：内联块；
左边距：100px；
宽度：200px；
浮动：左；
右边距：30px；
}
.楼层名称{
字体系列：塔荷马，日内瓦，无衬线；
字号：26px；
字体大小：粗体；
颜色：#666；
}

盒
地
为什么要设置灰色背景？也许您需要渐变？为什么在标记中使用这么多包装块？请尝试给出一个您想要的结果示例。提供的HTML和CSS非常复杂。@Vadim Ovchinnikov感谢您的查看和编辑。我没有包括很多元素，这就是为什么有这么多块。我不想把代码和其他东西混在一起。你能显示你想显示的输出图像吗？值得注意的是，它只受新浏览器版本的支持。@VladoPandžIćAccoding to flexbox现在有97.5%的设备支持，所以我不确定这项功能是否是如此“新”而不关心这一点。1-2年后，这张便条将毫无用处。是的，我看到了，但这是因为它是影响整个布局的财产，在某些国家IE explorer拥有10-20%的市场份额，而且在某些公司，你不能仅仅删除它IE@VladoPandžićFlexbox适用于IE10+。您并不经常需要支持早期版本。需要支持他们的人应该提出这个问题。
  <div id="wrapper-new">
  <div id="record-section">
    <div id="room-section">
         <div class="direction-image"> 
            <div class="room-name">Box
              <div class="floor-name">Ground</div>
         </div>
      </div>
  </div>
</div>

.wrapper {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    background-color: #FFFFFF;
}