How to center bootstrap vertically

The methods to achieve vertical centering in Bootstrap are: using the flexbox utility align-items-center; using the margin utility my-auto; using CSS to locate attribute position: absolute and top: 50%; transform: translateY(-50%); and using CSS grid attributes align-content and justify-content.

How to achieve vertical centering in Bootstrap

In Bootstrap, there are several ways to implement vertical centering elements:

1. Use the flexbox utility

The flexbox utility align-items-center can center elements vertically within the parent container.

HTML:

 <code class="html"><div class="container align-items-center"> <p>垂直居中的文本</p> </div></code>

2. Use margin

For smaller elements, you can use the margin utility my-auto . It sets margin in the vertical direction to automatically, effectively centering the element.

HTML:

 <code class="html"><div class="container"> <p class="my-auto">垂直居中的文本</p> </div></code>

3. Use positioning

You can also use CSS to locate the attribute position: absolute and top: 50%; transform: translateY(-50%); to center the element vertically.

HTML:

 <code class="html"><div class="container position-absolute" style="top: 50%; transform: translateY(-50%);"> <p>垂直居中的文本</p> </div></code>

4. Using CSS Mesh

CSS grid properties align-content and justify-content can be used to vertically center elements within the grid container.

HTML:

 <code class="html"><div class="container d-flex align-content-center justify-content-center"> <p>垂直居中的文本</p> </div></code>

Choose the method that suits you best according to your specific needs.

The above is the detailed content of How to center bootstrap vertically. For more information, please follow other related articles on the PHP Chinese website!