blocks|key|4698814|text|Bootstrap+4更新|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4698815|使用flex-box实现更简单的垂直网格对齐|4698816|​|4698817|@import+url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
html,
body+{
++height:+100%25
}|code-block|syntax|javascript|4698818|<div+class="h-100+row+align-items-center">
++<div+class="col"+style="background:red">
++++TEXT
++</div>
</div>|4698819|4698820|Bootstrap+3的解决方案|4698821|4698822|@import+url('http://getbootstrap.com/dist/css/bootstrap.css');
+html,+body,+.container-table+{
++++height:+100%25;
}
.container-table+{
++++display:+table;
}
.vertical-center-row+{
++++display:+table-cell;
++++vertical-align:+middle;
}|4698823|<script+src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

<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>|4698824|4698825|这是一个水平和垂直div在所有屏幕大小居中的简单示例。|4698826|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|13|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|14|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|15|8|@]|9|@]|A|$]]|$1|P|3|E|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|R|5|H|7|17|8|@]|9|@]|A|$I|J]]|$1|S|3|T|5|H|7|18|8|@]|9|@]|A|$I|J]]|$1|U|3|E|5|6|7|19|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1A|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Y|$]]

<p>UPDATE for Bootstrap 4</p>

<p>Simpler vertical grid alignement with flex-box</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
html,
body {
  height: 100%
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="h-100 row align-items-center"&gt;
  &lt;div class="col" style="background:red"&gt;
    TEXT
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Solution for Bootstrap 3</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 html, body, .container-table {
    height: 100%;
}
.container-table {
    display: table;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"&gt;&lt;/script&gt;

&lt;div class="container container-table"&gt;
    &lt;div class="row vertical-center-row"&gt;
        &lt;div class="text-center col-md-4 col-md-offset-4" style="background:red"&gt;TEXT&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>It's a simple example of a horizontally and vertically div centered in all screen sizes.</p>


blocks|key|4698855|text|回答得很好。我只是在玩玩，我得到了一个稍微好一点的解决方案。CSS将保持不变，即：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4698856|html,+body,+.container+{
++++height:+100%25;
}
.container+{
++++display:+table;
++++vertical-align:+middle;
}
.vertical-center-row+{
++++display:+table-cell;
++++vertical-align:+middle;
}|code-block|syntax|javascript|4698857|但对于HTML：|4698858|<div+class="container">
++++<div+class="vertical-center-row">
++++++++<div+align="center">TEXT</div>
++++</div>
</div>|4698859|这就足够了。|4698860|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Good answer ppollono. I was just playing around and I got a slightly better solution.
The CSS would remain the same, i.e. :</p>

<pre><code>html, body, .container {
    height: 100%;
}
.container {
    display: table;
    vertical-align: middle;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}
</code></pre>

<p>But for HTML:</p>

<pre><code>&lt;div class="container"&gt;
    &lt;div class="vertical-center-row"&gt;
        &lt;div align="center"&gt;TEXT&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>This would be enough.</p>


blocks|key|4698944|text|下面是将所有div放在中心位置的简单CSS规则|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4698945|.centered+{
++position:+fixed;
++top:+50%25;
++left:+50%25;
++transform:+translate(-50%25,+-50%25);
}|code-block|syntax|javascript|4698946|https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/|offset|length|4698947|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|2D|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

<p>Here is simple CSS rules that put any div in the center </p>

<pre><code>.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</code></pre>

<p><a href="https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/" rel="nofollow">https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/</a></p>


blocks|key|4699001|text|如果没有display+table和bootstrap，我宁愿这样做|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4699002|<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%25;
}
.container-table+{
++++width:100vw;
++height:150px;
++border:1px+solid+black;
}
.vertical-center-row+{
+++margin:auto;
++width:30%25;
++padding:63px;
++text-align:center;

}|code-block|syntax|javascript|4699003|http://codepen.io/matoeil/pen/PbbWgQ|offset|length|4699004|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|10|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

<p>without display table and without bootstrap , i would rather do that</p>

<pre><code>&lt;div class="container container-table"&gt;
    &lt;div class="row vertical-center-row"&gt;
        &lt;div class="text-center col-md-4 col-md-offset-4" style="background:red"&gt;TEXT&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


 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;

}
</code></pre>

<p><a href="http://codepen.io/matoeil/pen/PbbWgQ" rel="nofollow noreferrer">http://codepen.io/matoeil/pen/PbbWgQ</a></p>


blocks|key|4699092|text|我认为使用bootstrap完成布局的最简单方法是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4699093|<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>|code-block|syntax|javascript|4699094|​|4699095|我所做的就是添加div层，允许我将div居中，但是因为我没有使用百分比，所以您需要指定div的max-width作为中心。|4699096|您可以使用相同的方法将多个列居中，只需添加更多div层：|4699097|<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>|4699098|注意:我为md，sm和xs添加了一个带有列12的div，如果你不这样做，第一个带有背景颜色的div+(在这个例子中是“蓝紫罗兰”)将会折叠，你将能够看到子div，但是看不到背景颜色。|4699099|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>I think the simplest way to accomplish the layout with bootstrap is like this:</p>

<pre><code>&lt;section&gt;
&lt;div class="container"&gt;
    &lt;div class="row"&gt;
        &lt;div align="center"&gt;
            &lt;div style="max-width: 200px; background-color: blueviolet;"&gt;
                &lt;div&gt;
                    &lt;h1 style="color: white;"&gt;Content goes here&lt;/h1&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<p>all I did was to add layers of divs that allowed me to center the div, but since I am not using percentages, you need to specify the max-width of the div to be center.</p>

<p>You can use this same method to center more than one column, you just need to add more div layers:</p>

<pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
        &lt;div align="center"&gt;
            &lt;div style="max-width: 400px; background-color: blueviolet;"&gt;
                &lt;div class="col-md-12 col-sm-12 col-xs-12" style="background-color: blueviolet;"&gt;
                    &lt;div class="col-md-8 col-sm-8 col-xs-12" style="background-color: darkcyan;"&gt;
                        &lt;h1 style="color: white;"&gt;Some content&lt;/h1&gt;
                    &lt;/div&gt;
                    &lt;div class="col-md-4 col-sm-4 col-xs-12" style="background-color: blue;"&gt;
                        &lt;p style="color: white;"&gt;More content&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Note: that I added a div with column 12 for md, sm and xs, if you don't do this the first div with background color (in this case "blueviolet") will collapse, you will be able to see the child divs, but not the background color.</p>


blocks|key|4699159|text|你不需要在CSS中改变任何东西，你可以直接在类中编写它，你会得到结果。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4699160|<div+class="col-lg-4+col-md-4+col-sm-4+container+justify-content-center">
++<div+class="col"+style="background:red">
++++TEXT
++</div>
</div>|code-block|syntax|javascript|4699161|​|4699162|📷|atomic|offset|length|4699163|4699164|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/af5ca7cf01ec54ef7237777590d2e936.png|imageAlt^0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|10|8|@]|9|@$L|11|M|12|1|13]]|A|$]]|$1|N|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V|W|-4]]]]

<p>You don't need to change anything in CSS you can directly write this in class and you will get the result.</p>

<pre><code>&lt;div class="col-lg-4 col-md-4 col-sm-4 container justify-content-center"&gt;
  &lt;div class="col" style="background:red"&gt;
    TEXT
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><a href="https://i.stack.imgur.com/2FsA3.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2FsA3.png" alt="enter image description here"></a></p>


blocks|key|193221|text|这不是最好的方法，但仍然有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|193222|<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>|code-block|syntax|javascript|193223|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Not the best way ,but will still work</p>

<pre><code>&lt;div class="container-fluid h-100"&gt;
&lt;div class="row h-100"&gt;
&lt;div class="col-lg-12"&gt;&lt;/div&gt;
&lt;div class="col-lg-12"&gt;
&lt;div class="row h-100"&gt;
  &lt;div class="col-lg-4"&gt;&lt;/div&gt;
  &lt;div class="col-lg-4 border"&gt;
    This div is in middle
  &lt;/div&gt;
  &lt;div class="col-lg-4"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;
&lt;div class="col-lg-12"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;
</code></pre>


blocks|key|4699219|text|最简单的解决方案是在两侧添加一个空白列，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4699220|++<div+class="row+form-group">

++++<div+class="col-3"></div>

++++<ul+class="list-group+col-6">
++++++<li+class="list-group-item+active">Yuvraj+Patil</li>
++++</ul>

++++<div+class="col-3"></div>
++</div>|code-block|syntax|javascript|4699221|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Simplest solution will be adding one blank column in both sides like below:</p>

<pre><code>  &lt;div class="row form-group"&gt;

    &lt;div class="col-3"&gt;&lt;/div&gt;

    &lt;ul class="list-group col-6"&gt;
      &lt;li class="list-group-item active"&gt;Yuvraj Patil&lt;/li&gt;
    &lt;/ul&gt;

    &lt;div class="col-3"&gt;&lt;/div&gt;
  &lt;/div&gt;
</code></pre>


blocks|key|193277|text|试试这个，对于这个例子，我使用了固定的高度。我认为它不会影响响应场景。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|193278|​|193279|<html+lang="en">
<head>
++++<link+rel="stylesheet"+href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
++++<div+class="d-flex+justify-content-center+align-items-center+bg-secondary+w-100"+style="height:+300px;">
++++++++<div+class="bg-primary"+style="width:+200px;+height:+50px;"></div>
++++</div>
</body>
</html>|code-block|syntax|javascript|193280|193281|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>Try this, For the example, I used a fixed height. I think it is doesn't affect the responsive scenario.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="d-flex justify-content-center align-items-center bg-secondary w-100" style="height: 300px;"&gt;
        &lt;div class="bg-primary" style="width: 200px; height: 50px;"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|193304|text|在Bootstrap+4中，使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|193305|<div+class="d-flex+justify-content-center">...</div>|code-block|syntax|javascript|193306|您还可以根据需要更改位置：|193307|<div+class="d-flex+justify-content-start">...</div>
<div+class="d-flex+justify-content-end">...</div>
<div+class="d-flex+justify-content-between">...</div>
<div+class="d-flex+justify-content-around">...</div>|193308|参考here|offset|length|193309|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/4.0/utilities/flex/^0|0|0|0|0|2|4|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>In Bootstrap 4, use:</p>

<pre><code>&lt;div class="d-flex justify-content-center"&gt;...&lt;/div&gt;
</code></pre>

<p>You can also change the position depending on what you want:</p>

<pre><code>&lt;div class="d-flex justify-content-start"&gt;...&lt;/div&gt;
&lt;div class="d-flex justify-content-end"&gt;...&lt;/div&gt;
&lt;div class="d-flex justify-content-between"&gt;...&lt;/div&gt;
&lt;div class="d-flex justify-content-around"&gt;...&lt;/div&gt;
</code></pre>

<p>Reference <a href="https://getbootstrap.com/docs/4.0/utilities/flex/" rel="nofollow noreferrer">here</a></p>


blocks|key|4699331|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4699332|body{
++++height:+100vh;
}+
.container{
++++height:+100%25;
}|code-block|syntax|javascript|4699333|<link+href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"+rel="stylesheet"/>


<div+class="container+text-center+d-flex+align-items-center+justify-content-center">
++++++++<div>
++++++++++++<div>
++++++++++++++++<h1>Counter</h1>
++++++++++++</div>
++++++++++++<div>
++++++++++++++++<span>0</span>
++++++++++++</div>
++++++++++++<div>
++++++++++++++++<button+class="btn+btn-outline-primary">Decrease</button>
++++++++++++++++<button+class="btn+btn-danger">Reset</button>
++++++++++++++++<button+class="btn+btn-outline-success">Increase</button>
++++++++++++</div>
++++++++</div>
++++</div>|4699334|4699335|你也可以这样做。|4699336|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body{
    height: 100vh;
} 
.container{
    height: 100%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/&gt;


&lt;div class="container text-center d-flex align-items-center justify-content-center"&gt;
        &lt;div&gt;
            &lt;div&gt;
                &lt;h1&gt;Counter&lt;/h1&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;span&gt;0&lt;/span&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;button class="btn btn-outline-primary"&gt;Decrease&lt;/button&gt;
                &lt;button class="btn btn-danger"&gt;Reset&lt;/button&gt;
                &lt;button class="btn btn-outline-success"&gt;Increase&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>you can do also that way.</p>


blocks|key|4699386|text|为了使div居中，将内部bootstrap的三个类名分配到div：ml-0+mr-0+mx-auto|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4699387|请看下面的简单示例，它是如何居中的|4699388|<div+class="bg-primary+w-50+ml-0+mr-0+mx-auto+text-center">
++++++Center
</div>|code-block|syntax|javascript|4699389|entityMap^0|X|H|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>For centering a div assign three class names of bootstrap inside into a div:  <code>ml-0 mr-0 mx-auto</code></p>
<p>Just look at the simple example below how it is being centered</p>
<pre><code>&lt;div class=&quot;bg-primary w-50 ml-0 mr-0 mx-auto text-center&quot;&gt;
      Center
&lt;/div&gt;
</code></pre>


<p><img src="https://i.stack.imgur.com/vXdbR.jpg" alt="position a div at centre of a responsive page"></p>

<p>I need to create a responsive page using bootstrap by position a div at the centre of a page as like in the below mentioned layout.</p>


In a bootstrap responsive page how to center a div

​​我需要使用bootstrap创建一个响应式页面，在页面中心放置一个div，就像下面提到的布局一样。

问在引导响应页面中，如何使div居中
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在引导响应页面中，如何使div居中EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在引导响应页面中，如何使div居中
EN