bootstrap5垂直居中用法

使用垂直对齐实用程序更改元素的对齐方式。请注意，垂直对齐只影响行内、行内块、行内表格和表格单元格元素。

1. .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top

复制代码

要垂直居中非内联内容(如< div >等)，请使用我们的flex box实用程序。 使用行内元素:

1. d-flex align-items-center

复制代码

垂直多行

1. d-flex flex-column  justify-content-center

复制代码

水平单行

1. d-flex align-items-center

复制代码

1. <div class="position-relative">
   
2.   <div class="position-absolute top-0 start-0 translate-middle"></div>
   
3.   <div class="position-absolute top-0 start-50 translate-middle"></div>
   
4.   <div class="position-absolute top-0 start-100 translate-middle"></div>
   
5.   <div class="position-absolute top-50 start-0 translate-middle"></div>
   
6.   <div class="position-absolute top-50 start-50 translate-middle"></div>
   
7.   <div class="position-absolute top-50 start-100 translate-middle"></div>
   
8.   <div class="position-absolute top-100 start-0 translate-middle"></div>
   
9.   <div class="position-absolute top-100 start-50 translate-middle"></div>
   
10.   <div class="position-absolute top-100 start-100 translate-middle"></div>
    
11. </div>

复制代码