如何使用CSS垂直集中Bootstrap V4模式?

本文介绍了如何使用CSS垂直集中Bootstrap V4模式?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

推荐答案

您可以通过覆盖.modal-dialog的位置来使模态垂直居中.

You can vertical center the modal by overriding the position of the .modal-dialog like this..

.modal.show .modal-dialog {
    -webkit-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
    top: 50%;
    margin: 0 auto;
}

http://www.codeply.com/go/14Ki1kyTgo

更新2018年

从Bootstrap 4 Beta 3开始，有一个新的modal-dialog-centered类可以用来代替上述自定义方法.

As of Bootstrap 4 Beta 3, there is a new modal-dialog-centered class that can be used instead of the custom method described above.

https://www.codeply.com/go/lpOtIFoN6E (测试版3)

这篇关于如何使用CSS垂直集中Bootstrap V4模式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！