CSS让盒子在底部居中

CSS中，将一个元素（通常是一个包含内容的盒子）放在页面底部居中，可以利用 Flexbox 或 Grid 布局，以及一些绝对定位和负值 margin 的技巧。以下是两种常见的方法：

1. **Flexbox** 方法：

   .container {
     display: flex;
     justify-content: center; /* 居中水平方向 */
     align-items: flex-end; /* 把元素放在下边界 */
     height: 100%; /* 或设置一个固定的高 */
     position: relative; /* 确保容器有一个基准 */
   }
   
   .item {
     position: absolute; /* 绝对定位 */
     bottom: 0; /* 底部对齐 */
     width: 100%;
   }

2. **Grid** 方法（如果支持 Grid 布局）：

   .container {
     display: grid;
     place-items: center bottom; /* 同时水平和垂直居中，并底对齐 */
     height: 100vh; /* 视口高度 */
   }
   
   .item {
     /* 如果需要，添加grid-column 和 grid-row 设置行和列 */
   }

3. **传统的布局方式**（如果内容固定高度）：

   .container {
     position: relative;
     height: 100px; /* 固定高度 */
   }
   
   .item {
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%); /* 使内容中心对齐 */
   }