Как я могу централизовать Bootstrap V4 modal с помощью CSS?Как я могу вертикально централизовать модуль Bootstrap V4 с помощью CSS?
ответ
Вы можете вертикальный центр модального переопределения положения .modal-dialog
, как это ..
.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
Update 2018
На Bootstrap 4 Beta 3, есть новый класс modal-dialog-centered
, который можно использовать вместо пользовательского метода, описанного выше.
Это, безусловно, работает. Могу ли я спросить, почему * translate (0, -50%); * также необходим? –
Это вертикальный центрирующий [трюк] (http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/). Он находит центр окна просмотра ('top: 50%' & 'transform: translateY (-50%)'), когда высота элемента (модальная) неизвестна. – ZimSystem
@wonderfulworld, обратите внимание, используя этот метод центрирования на моделях выше, чем область просмотра, приводит к тому, что верхняя часть модала становится недоступной. –
Использование Flexbox его очень легко добавить вертикальное выравнивание самозагрузки 4 модального всплывающего окна. Вот код CSS.
SASS
.modal-open .modal.modal-center {
display: flex!important;
align-items: center!important;
.modal-dialog {
flex-grow: 1;
}
}
Составитель CSS
.modal-open .modal.modal-center {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-box-align: center !important;
-ms-flex-align: center !important;
align-items: center !important;
}
.modal-open .modal.modal-center .modal-dialog {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
могли бы вы обернуть его в вертикальном выравнивать полезный класс? http://v4-alpha.getbootstrap.com/utilities/vertical-align/ – Jorg
Я пробовал выравнивание по середине, но не работал. –