Bootstrap centering: Quickly achieve horizontal and vertical centering

The method to implement centering in Bootstrap is as follows: Center horizontally: Text: Add .text-center class block element: Add .mx-auto class vertically: In-line element: Add .align-self-center class block element: Use d-flex and .align-items-center classes to use vh-100 and .align-content-center classes

Implement centering in Bootstrap: horizontal and vertical

What is centering?

Centering means placing an element horizontally or vertically in the center of its container. In web design, centering elements enhance visual appeal and create a sense of balance.

Use Bootstrap to achieve horizontal centering

Horizontal centered text:

• Add .text-center class to text container

Horizontal centered block element:

• Add .mx-auto class to block element. This will automatically add margin: 0 auto; attribute to the block element to achieve horizontal centering.

Use Bootstrap to achieve vertical centering

Vertical centered in row elements:

• Add .align-self-center class to the inline element

Vertical centered block element:

• Add .d-flex class to the container, and then add .align-items-center class to the block element or
• Add .vh-100 class to the container, then add .align-content-center class to the block element, and set the minimum height for the block element

Example:

 <code class="html"><!-- 水平居中文本--> <p class="text-center">居中的文本</p> <!-- 水平居中块元素--> <div class="mx-auto" style="width: 200px; height: 100px;">居中的块元素</div> <!-- 垂直居中行内元素--> <div class="d-flex justify-content-center"> <span class="align-self-center">居中的行内元素</span> </div> <!-- 垂直居中块元素（使用d-flex） --> <div class="d-flex flex-column vh-100 align-items-center"> <div style="width: 200px; height: 100px;">居中的块元素</div> </div> <!-- 垂直居中块元素（使用vh-100） --> <div class="vh-100"> <div class="align-content-center" style="height: 100px;">居中的块元素</div> </div></code>

The above is the detailed content of Bootstrap centering: Quickly achieve horizontal and vertical centering. For more information, please follow other related articles on the PHP Chinese website!