如何使引导模态垂直居中?

时间:2018-07-26 09:33:26

标签: javascript css html5 twitter-bootstrap-3

我对此并不陌生。实际上,我已经尝试了所有可用的解决方案,所以,我在问这个问题。

我的模型CSS是

#orphanModal{
  .modal-body{
    min-height: 450px;
    margin-bottom: 10px;
  }
  .modal-footer {
    margin: 0;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 400;
    background: #f1f1f1;
    border-top: 1px solid #e0e0e0;
    border-radius: 6px;
  }
  .modal-dialog{
    width: 700px;
  }
  .modal-close, .modal-close:hover{
    color: #000000;
    font-weight: bolder;
    font-size: 24px;
  }
  .modal-header{
    height: 60px;
  }
}

我的模型是我们从bootstarp站点获取的默认模型。 谁能告诉我我的CSS有什么问题吗?

我尝试了

.modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
}

也是。但没有运气。谢谢。

1 个答案:

答案 0 :(得分:0)

要垂直对齐任何内容,在这种情况下,可以使用模式:

.modal{
  position: relative;
  top: 50;
  transform: translateY(-50%);
}
  

注意:如果父元素的位置相对,这将起作用。

这也会在调整大小时对齐元素。