A brief discussion on vertical and horizontal centering in Bootstrap

This article will introduce to you the vertical and horizontal centering of Bootstrap3 and Bootstrap4. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Related tutorial recommendations: "bootstrap tutorial"

Bootstrap horizontally centered

// 文本：

class ="text-center"

// 图片居中：

class = "center-block"

//其他元素：

//bootstrap3水平居中：利用bootstrap列偏移

class = "col-md-offset-4 col-lg-offset-4col-xl-offset-4"

// bootstrap4水平居中：

class = "m-auto"

Bootstrap vertical centering

bootstrap3 How to vertically center the inside of a div:

Bootstrap’s grid system uses the floating method of float:left, and the vertical-align attribute does not It works, so clear the float attribute of the internal div and add the display attribute, as follows:

.middle {

   float: none;

   display: inline-block;

   vertical-align: middle;

}

Bootstrap3 login box adaptive horizontal centering and vertical centering

https://blog.csdn.net/ shenzhen_zsw/article/details/75331515

Bootstrap4 How to center the div vertically:

Set the height of the element

.login-center {

 height: 100vh;

}

Apply .align-items-center to vertically center the element :

<div class="row align-items-centerjustify-content-center login-center">
 
…
 
</div>

Application. justify-content-center can center the element horizontally:

Effect:

More programming related knowledge, Please visit: Programming Teaching! !

The above is the detailed content of A brief discussion on vertical and horizontal centering in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!