如何用Bootstrap 5实现列内内容居中并将元素置于底部？

要实现你需要的布局，关键是利用Bootstrap的flex类控制垂直方向排列，同时确保列有足够的垂直高度空间。具体修改如下：

修改步骤 #

• 给左侧列添加 d-flex flex-column min-vh-100：将列转为垂直方向的flex容器，同时让它占满视口高度，保证有足够垂直空间布局元素。
• 给欢迎内容块添加 mx-auto my-auto：让这个块在水平（mx-auto）和垂直（my-auto）方向上都居中。
• 给底部的Icons块添加 mt-auto：利用margin-top:auto的特性，将这个块自动推到列的底部。

修改后的完整代码 #

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  </head>
  <body>
    
    <header>
      <div class="container-fluid">
        <div class="row">
           <!-- LEFT -->
           <div class="col-md-6 p-md-5 p-4 d-flex flex-column min-vh-100" style="background-color: lime;">
             <div class="mx-auto my-auto"> <!-- 居中显示 -->
               <h1>Welcome</h1>
               <h2>to my web!</h2>
             </div>
             
             <div class="mt-auto"> <!-- 置于底部 -->
               <p>Icons</p>
             </div>
           </div>
            

           <!-- RIGHT -->
           <div class="col-6 d-md-block d-none" style="background-color: red"></div>
        </div>
      </div>
    </header>
    
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  </body>
</html>

补充说明 #

如果你的列不需要占满整个视口高度，而是希望基于父容器的高度布局，只需确保父容器（如row、container-fluid）有明确高度，然后把min-vh-100换成h-100即可，其他类用法保持不变。

内容的提问来源于stack exchange，提问作者Raul