Html 垂直中心分区

我有一个高高的图像作为左栏（#watch）和一个div作为右栏（#watch column），靠着左边向上推。我试图垂直居中的div，但找不到任何工作

最好的方法是什么？正如您将看到的，我的站点有些不稳定。谢谢

<section id="time-keeper-overview-id">
   <div class="row" id="watch-parent">
      <img id="watch" src="img/watch.png" class="img-responsive" alt="Responsive image">
      <div id="watch-column">
         <div id="time-keeper-description">
            <p>Insert paragraph of text here</p>
         </div>
         <img id="bus-stop-waves" src="img/bus-stop-waves.png" class="img-responsive" alt="Responsive image">
      </div>
   </div>
</section>

#watch {
  float: left;
  max-height: 100% !important;
  padding-right: 4%;
}

#watch-column {
  vertical-align: middle !important;
  overflow: hidden;
}

在此插入一段文字

#监视{
浮动：左；
最大高度：100%！重要；
右：4%；
}
#观察栏{
垂直对齐：中间！重要；
溢出：隐藏；
}

---

完整站点位于

我注意到使用css显示：表格单元格；同样，使用div或容器的表显示的css属性也允许垂直对齐

display: table-cell;
vertical-align: middle;

另外，使用值设置css line height属性允许垂直对齐：中间；也要工作

另见参考资料：

Flex-Box也允许这种类型的对齐，但Flex-Box与不自动更新的旧浏览器（也称为“常青”浏览器）并不完全兼容

另请参见-柔性箱垂直对齐：

---

您还可以在css中使用相对和绝对位置属性，然后说top:50%；这实际上完全取决于您的设计和需求如何最适合您的项目。

实际上，您只能通过设置内部容器的高度来实现这一点。 在您的情况下，应该为

#time keeper description

设置高度，并在外部容器上设置其他属性。 尝试以下添加：

#time-keeper-description {
    height:500px /* or whatever suits your content */
}

#watch-column {
    position: absolute;
    top: 50%;
    margin-top: -250px; /* half of #time-keeper-description height */

}

如果无法设置固定高度，请在div上使用此选项：

display: table-cell;
vertical-align: middle;

---

希望这有帮助！；）

我将在这里回答我自己的问题。感谢所有这些张贴虽然

Flexbox提供了这种情况下的最佳解决方案，其中图像必须是视口高度和自动宽度，但设计的其余部分必须是流体。注意

flex:0自动使用
最大高度工作：100%启用图像为全高，但仍保持正确的宽度

#watch-parent {
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;

   -webkit-align-items: center;
   -moz-box-align: center;
   -ms-align-items: center;
   align-items: center;
}

#watch {
   max-height: 100%;
   -webkit-flex: 0 0 auto;
   -moz-box-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
   padding-right: 4%;
}

尝试使用边距：自动0px。您还可以检查以下内容：。请检查此堆栈溢出回答：AndyG:margin:auto 0px不执行任何操作。链接问题的答案需要固定的宽度或绝对位置，这不是我想要的。它需要流体宽度，因为img列的高度将根据浏览器高度而变化，div需要向上推靠图像。位置：绝对将列从流中取出，使其不再是列。同时显示：表格单元格在此实例中不起任何作用。您能为其提供链接吗？是的，非常感谢您的帮助，但我想我已经用flexbox解决了这个问题：）