У меня есть страница, где существует только форма, и я хочу, чтобы форма размещалась в центре экрана.
<div class="container">
<div class="row justify-content-center align-items-center">
<form>
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
</div>
</div>
В justify-content-center
совмещается форма по горизонтали, но не могу понять, как выровнять его по вертикали. Я пытался использовать align-items-center
иalign-self-center
, но это не работает.
Чего мне не хватает?
источник
<section>
тег или нужно придерживаться<div>
s для центрирования контента по горизонтали и вертикали в окне просмотра? У меня есть существующий сайт, на котором есть страницы с разделами, которые меняют цвет и / или фоновые изображения.h-100 justify-content-center align-items-center
работалЭта работа для меня:
источник
<style type="text/css"> html, body{ height: 100%; } .full-page{ height: 100vh; width: 100vw; } </style>
Flexbox может помочь вам. информация здесь
источник
Вам нужно что-то, чтобы сосредоточить свою форму. Но поскольку вы не указали высоту для html и body, он будет просто переносить содержимое, а не область просмотра. Другими словами, не было места для центрирования предмета.
источник
h-100
класс утилит может быть использованheight:100%
в Bootstrap 4.Bootstrap имеет текст-центр для центрирования текста. Например
Вы меняете следующее
к следующему
источник
Никто не работал для меня. Но его один сделал.
Так как класс Bootstrap 4 .row теперь отображается: flex, вы можете просто использовать новую утилиту align-self-centre flexbox в любом столбце для его вертикального центрирования:
Я узнал об этом из https://medium.com/wdstack/bootstrap-4-vertical-center-1211448a2eff
источник
Это работает в IE 11 с Bootstrap 4.3 . Пока другие ответы не работали в IE11 в моем случае.
источник
источник
Используйте этот код в CSS:
источник
Я оказался здесь, потому что у меня была проблема с сеткой Bootstrap 4 и циклом Angular * ngFor. Я исправил это, применяя класс col justify-content-center к div, реализующему ngFor:
который дает результат:
источник
Из документа (bootsrap 4):
https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content
источник