如何在HTML中使.loader图片在.please-wait容器内居中并居底？

嘿，我来帮你搞定这个布局问题！你现在的需求是让.loader图片在.please-wait容器里同时实现水平居中和垂直居底，我给你两种实用的方案，你可以根据自己的习惯选择：

方案一：用Flexbox布局（推荐，现代布局首选） #

Flexbox处理这种对齐需求特别省心，只需要修改.please-wait的样式，再微调一下子元素的属性就行：

#container { /* border: 2px solid black; */ width: 100.6%; margin: 5px; white-space: nowrap; overflow: hidden; position:relative; }
#main { position:absolute; /* border: 2px solid blue; */ float: left; margin: 3px; width: 65%; display: block; top: 25%; }
#main.welcome { text-align: center; /* 修正原代码中的拼写错误：test-align → text-align */ }
#main.welcome h2 { width: 58%; margin: 0 auto; text-align: center; word-break: normal; word-wrap: break-word; white-space: pre-line; /* border: 2px solid red; */ }
#aside-right { position:relative; max-height:200px; height:200px; border: 2px solid green; float: right; width: 27%; }
#aside-right img { position:relative; width:100%; float:right; }
.please-wait { 
  position:absolute; 
  border:2px solid red; 
  height: 100%; 
  width: 100%;
  /* 新增Flex布局核心属性 */
  display: flex;
  flex-direction: column; /* 让h3和loader保持垂直排列 */
  align-items: center; /* 所有子元素水平居中 */
  justify-content: flex-end; /* 把内容整体推到容器底部 */
  padding-bottom: 15px; /* 可选：给底部留点间距，避免紧贴边框 */
}
.please-wait h3 { 
  position: absolute; /* 让h3脱离Flex流，保持你原来想要的顶部位置 */
  top:30px; 
  margin: 15px; 
  text-align: center; 
}
.loader { 
  position: relative; 
  max-width: 20%; 
  border:2px solid blue;
  margin: 0; /* 去掉原有的margin，用Flex布局控制位置 */
}

为什么这样有效？ #

• display: flex把.please-wait变成Flex容器，子元素的对齐逻辑变得简洁；
• align-items: center确保所有子元素水平方向自动居中；
• justify-content: flex-end把内容块（这里就是loader）推到容器的垂直底部；
• 把h3设为绝对定位，是为了让它不占用Flex布局的空间，不会影响loader的居底位置，完美保留你原来设置的top:30px效果。

方案二：用绝对定位+transform（兼容旧浏览器的备选） #

如果你需要兼容一些不支持Flexbox的旧浏览器，这种绝对定位的方式也能完美实现需求：

#container { /* border: 2px solid black; */ width: 100.6%; margin: 5px; white-space: nowrap; overflow: hidden; position:relative; }
#main { position:absolute; /* border: 2px solid blue; */ float: left; margin: 3px; width: 65%; display: block; top: 25%; }
#main.welcome { text-align: center; /* 修正拼写错误 */ }
#main.welcome h2 { width: 58%; margin: 0 auto; text-align: center; word-break: normal; word-wrap: break-word; white-space: pre-line; /* border: 2px solid red; */ }
#aside-right { position:relative; max-height:200px; height:200px; border: 2px solid green; float: right; width: 27%; }
#aside-right img { position:relative; width:100%; float:right; }
.please-wait { 
  position:absolute; 
  border:2px solid red; 
  height: 100%; 
  width: 100%;
  position: relative; /* 让它成为绝对定位元素的参考父容器 */
}
.please-wait h3 { 
  position: relative; 
  margin: 15px; 
  top:30px; 
  text-align: center; 
}
.loader { 
  position: absolute; 
  max-width: 20%; 
  border:2px solid blue;
  left: 50%; /* 先把元素左边缘移到容器水平中点 */
  transform: translateX(-50%); /* 再向左移动自身宽度的一半，实现水平居中 */
  bottom: 15px; /* 让元素贴在容器底部，留15px间距 */
  margin: 0;
}

原理说明 #

• 绝对定位的元素会相对于最近的定位父容器（这里就是.please-wait）定位；
• left:50% + transform: translateX(-50%)是实现未知宽度元素水平居中的经典技巧，不用手动计算具体宽度；
• bottom:15px直接把元素固定在容器底部，轻松控制和底部的间距。

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