Мне нужно создать отзывчивую страницу, используя bootstrap, поместив div в центр страницы, как в приведенном ниже макете.
На странице начальной загрузки, как центрировать div
Ответ 1
UPDATE для Bootstrap 4
Упрощенное выравнивание вертикальной сетки с гибкой коробкой
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
html,
body {
height: 100%
}<div class="h-100 row align-items-center">
<div class="col" style="background:red">
TEXT
</div>
</div>Ответ 2
CSS
html,
body {
height: 100%;
}
.container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
HTML:
<div class="container">
<div>
example
</div>
</div>
Ответ 3
В бутстрапе 4
для центрирования ребенка по горизонтали, используйте класс начальной загрузки
justify-content-center
чтобы расположить ребенка по центру вертикально, используйте класс начальной загрузки
align-items-center
но помните, что не забывайте использовать с ними класс d-flex, это вспомогательный класс bootstrap-4, вот так
<div class="d-flex justify-content-center align-items-center" style="height:100px;">
<div class="bg-primary">MIDDLE</div>
</div>
Примечание: обязательно добавьте утилиты bootstrap-4, если этот код не работает
Ответ 4
Обновление для Bootstrap 4
Теперь, когда Bootstrap 4 является flexbox, выравнивание по вертикали проще. Для полного div flexbox div, просто мы my-auto для четного верхнего и нижнего полей...
<div class="container h-100 d-flex justify-content-center">
<div class="jumbotron my-auto">
<h1 class="display-3">Hello, world!</h1>
</div>
</div>
http://codeply.com/go/ayraB3tjSd/bootstrap-4-vertical-center
Ответ 5
без таблицы отображения и без бутстрапа, я бы предпочел сделать это
<div class="container container-table">
<div class="row vertical-center-row">
<div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>
</div>
</div>
html, body, .container-table {
height: 100%;
}
.container-table {
width:100vw;
height:150px;
border:1px solid black;
}
.vertical-center-row {
margin:auto;
width:30%;
padding:63px;
text-align:center;
}
Ответ 6
Хороший ответ ppollono. Я просто играл, и у меня было немного лучшее решение. CSS останется прежним, т.е.:
html, body, .container {
height: 100%;
}
.container {
display: table;
vertical-align: middle;
}
.vertical-center-row {
display: table-cell;
vertical-align: middle;
}
Но для HTML:
<div class="container">
<div class="vertical-center-row">
<div align="center">TEXT</div>
</div>
</div>
Этого было бы достаточно.
Ответ 7
Вам не нужно ничего менять в CSS, вы можете написать это прямо в классе, и вы получите результат.
<div class="col-lg-4 col-md-4 col-sm-4 container justify-content-center">
<div class="col" style="background:red">
TEXT
</div>
</div>
Ответ 8
Я думаю, что самый простой способ выполнить макет с помощью бутстрапа выглядит следующим образом:
<section>
<div class="container">
<div class="row">
<div align="center">
<div style="max-width: 200px; background-color: blueviolet;">
<div>
<h1 style="color: white;">Content goes here</h1>
</div>
</div>
</div>
</div>
</div>
все, что я делал, это добавить слои div, которые позволили мне центрировать div, но поскольку я не использую проценты, вам нужно указать максимальную ширину div для центра.
Вы можете использовать этот же метод для центровки более одного столбца, вам просто нужно добавить больше div-слоев:
<div class="container">
<div class="row">
<div align="center">
<div style="max-width: 400px; background-color: blueviolet;">
<div class="col-md-12 col-sm-12 col-xs-12" style="background-color: blueviolet;">
<div class="col-md-8 col-sm-8 col-xs-12" style="background-color: darkcyan;">
<h1 style="color: white;">Some content</h1>
</div>
<div class="col-md-4 col-sm-4 col-xs-12" style="background-color: blue;">
<p style="color: white;">More content</p>
</div>
</div>
</div>
</div>
</div>
</div>
Примечание: я добавил div с столбцом 12 для md, sm и xs, если вы этого не сделаете, первый div с цветом фона (в данном случае "blueviolet" ) рухнет, вы сможете увидеть дочерние div, но не цвет фона.
Ответ 9
Для актуальной версии Bootstrap 4.3.1 используйте
Стиль
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style type="text/css">
html, body {
height: 100%;
}
</style>
Код
<div class="h-100 d-flex justify-content-center">
<div class="jumbotron my-auto">
<!-- example content -->
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Title</h4>
<p>Desc</p>
</div>
<!-- ./example content -->
</div>
</div
Ответ 10
Не лучшим образом, но все равно будет работать
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-lg-12"></div>
<div class="col-lg-12">
<div class="row h-100">
<div class="col-lg-4"></div>
<div class="col-lg-4 border">
This div is in middle
</div>
<div class="col-lg-4"></div>
</div>
</div>
<div class="col-lg-12"></div>
</div>
</div>
Ответ 11
Вот простые правила CSS, которые помещают любой div в центр
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
Ответ 12
jsFiddle
HTML
<div class="container" id="parent">
<div class="row">
<div class="col-lg-12">text
<div class="row ">
<div class="col-md-4 col-md-offset-4" "id="child">TEXT</div>
</div>
</div>
</div>
</div>
CSS
#parent {
text-align: center;
}
#child {
margin: 0 auto;
display: inline-block;
background: red;
color: white;
}