2017-02-23 29 views
4

Как я могу централизовать Bootstrap V4 modal с помощью CSS?Как я могу вертикально централизовать модуль Bootstrap V4 с помощью CSS?

+0

могли бы вы обернуть его в вертикальном выравнивать полезный класс? http://v4-alpha.getbootstrap.com/utilities/vertical-align/ – Jorg

+0

Я пробовал выравнивание по середине, но не работал. –

ответ

5

Вы можете вертикальный центр модального переопределения положения .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, который можно использовать вместо пользовательского метода, описанного выше.

https://www.codeply.com/go/lpOtIFoN6E (Beta 3)

+0

Это, безусловно, работает. Могу ли я спросить, почему * translate (0, -50%); * также необходим? –

+0

Это вертикальный центрирующий [трюк] (http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/). Он находит центр окна просмотра ('top: 50%' & 'transform: translateY (-50%)'), когда высота элемента (модальная) неизвестна. – ZimSystem

+0

@wonderfulworld, обратите внимание, используя этот метод центрирования на моделях выше, чем область просмотра, приводит к тому, что верхняя часть модала становится недоступной. –

2

Использование Flexbox его очень легко добавить вертикальное выравнивание самозагрузки 4 модального всплывающего окна. Вот код CSS.

See Woking Demo

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; 
} 

See Woking Demo