如何实现添加按钮在盒子容器内的水平与垂直双重居中？

解决方法 #

你可以通过flex布局快速实现添加按钮（加号图标）在上传框内的完全居中，因为你已经引入了Bootstrap 5，有两种实现方案可选：

方案1：使用Bootstrap自带工具类（无需修改原有CSS）

给class="images-upload"的元素追加3个Bootstrap flex类即可：

<div for="images-upload" class="images-upload d-inline-flex align-items-center justify-content-center">
  <i class=" fas fa-plus-circle fa-3x custom-icon"></i>
</div>

方案2：修改原有CSS样式

调整.images-upload的display属性并追加居中规则：

.images-upload {
  background-color: #ffffff;
  border-radius: 5px;
  border: 1px dashed #ccc;
  /* 把原有display:inline-block替换为下面三个属性 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  cursor: pointer;
  width: 165px;
  height: 85px;
}

可选优化

如果你需要让整个上传按钮容器和右侧的预览图片整体在gallery盒子内垂直对齐，可以给包裹它们的<div class="p-3">元素追加d-flex align-items-center gap-2类，既能实现垂直对齐，还能自动添加元素间距，避免排版错位。
另外你原有代码里.images-preview的padding-top: -14px是无效属性（padding不支持负值），可以直接删除。

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