当图像较小时，在引导模式中垂直对齐中心

我正在使用引导模式来显示不同尺寸的图像。我希望模态主体具有最小的宽度和高度（实际上是 600*400）。因此，当图像较大时，它会扩展并运行良好，但当图像的高度低于 400 像素时，图像会在顶部（垂直）对齐。所以我想将它垂直对齐在模态主体的中间。

我努力了：

.vcenter {
     display: inline-block;
     vertical-align: middle;
     float: none;
}

and

.image-center {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

在对象标签上，但效果不佳。

这是我的 css（对象代表图像）：

 object  {
    width:auto;
    max-width: 100%;
    max-height: 70vh;
    width: auto\9; /* ie8 */
  }

  .modal-header {
    text-align: left;
  }

  @media (min-width: 768px){
    .modal-dialog {
      max-width: 95%;
    }
    .modal-body{
      min-width: 600px;
      min-height: 400px;
    }
  }

  .modal-dialog {
      width: auto;      
      text-align: center;
    }

  .modal-content{
    display:inline-block;
    text-align: center;
  }

和我的一个模态的 html：

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <object data="https://og.github.com/mark/[email protected] /cdn-cgi/l/email-protection" type="image/png">
        </object>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

这里还有一个plunker http://plnkr.co/edit/jIKJ9beA77x4R0wyD7KS?p=preview显示小图像和大图像的行为之间的比较。

任何想法？

Thanks

你应该试试 ：

object  {
    width:auto;
    max-width: 100%;
    width: auto\9; /* ie8 */
    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-height: 70vh;
 }

祝你今天过得愉快 ！