Using Bootstrap 4/5 to achieve element centering

In Bootstrap 4/5, horizontal centering elements can use the text-center class or mx-auto class, vertical centering elements can use the d-flex and align-items-center classes or the margin: auto; styles in Bootstrap 5, and d-grid and align-content-center classes or position: absolute; and top: 50%; left: 50%; styles.

Implementing element centering using Bootstrap 4/5

In Bootstrap 4/5, use the following methods to center the element:

Center horizontally

• Use text-center class: <div class="text-center">...</div>
• Use mx-auto class (Bootstrap 5): <div class="mx-auto">...</div>

Vertical centered

Bootstrap 4:

• Use d-flex and align-items-center classes: <div class="d-flex align-items-center">...</div>

Bootstrap 5:

• Use d-grid and align-content-center classes: <div class="d-grid align-content-center">...</div>

Other ways to use vertical centering

• Use margin: auto; style: <div style="margin: auto;">...</div>
• Use position: absolute; and top: 50%; left: 50%; style: <div style="position: absolute; top: 50%; left: 50%;">...</div>

Example:

Horizontal centered:

 <code class="html"><div class="text-center"> <h1 id="标题">标题</h1> </div></code>

 <code class="html"><div class="mx-auto"> <button class="btn btn-primary">按钮</button> </div></code>

Vertical centering:

Bootstrap 4:

 <code class="html"><div class="d-flex align-items-center"> <h1 id="标题">标题</h1> </div></code>

Bootstrap 5:

 <code class="html"><div class="d-grid align-content-center"> <button class="btn btn-primary">按钮</button> </div></code>

The above is the detailed content of Using Bootstrap 4/5 to achieve element centering. For more information, please follow other related articles on the PHP Chinese website!