css - 当图像很小时，在 Bootstrap 模式中垂直对齐中心

Question

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

我试过:

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

和

.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/github-mark@1200x630.png" 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显示小图片和大图片的行为比较。

有什么想法吗？

谢谢

Answer 1

你应该试试:

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

祝你有美好的一天!