如何使图标在响应式平方 div 中居中？ [复制]答案

【问题标题】：How to make icon stay centered in responsive squared div? [duplicate]如何使图标在响应式平方 div 中居中？ [复制]
【发布时间】：2020-10-05 11:46:30
【问题描述】：

我有一个div，它是一个正方形，无论设备如何，它都保持为正方形。我需要在这个正方形内放置一个 FontAwesome 图标，并且我需要该图标在所有屏幕中保持居中。出于某种原因，我没有做到这一点。

在桌面看起来不错，你可以看到图标水平和垂直居中：

在移动端看起来像下图，图标不再居中：

我想在不使用媒体查询的情况下实现这一点。这是我的Codepen。

【问题讨论】：

标签： html css bootstrap-4 font-awesome

【解决方案1】：

只需像这样更改您的 .add-img-button

.add-img-button {
    color: #8abe57;
    position: absolute;
    /* width: 10%; */
    height: auto;
    display: inline-block;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    font-size: 1.5em;
}

通过移除强加的宽度，您可以使用顶部和右侧（或左侧）将其真正居中，然后使用 transfor translate 调整到对象的中心。

here's a pen

【讨论】：

【解决方案2】：

图标不居中的原因有两点：

您正在尝试调整实际矢量图形的容器 (<i>) 而不是实际图形 (::before 内 <i>) 的大小。每当其容器变小时，这会将图形向右移动。

Font Awesome 使用 unicode 字符来显示图标。它们基本上是文本。要调整图形本身的大小，您可以这样做（2em 值就是一个例子）：

.add-img-button::before {
  font-size: 2em;
}

您可以使用transform: translate(-50%, -50%) 选项将元素的锚点移动到其中心，然后使用left: 50%、top: 50% 定位它。

.add-img-button {
  color: #8abe57;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5em;
}

【讨论】：

【解决方案3】：

.img-holder {
  width: 240px;
  height: 240px;
  border: 2px dotted #8abe57;
  border-radius: 0.25rem;
  display: flex;
}

.img-holder i {
  margin: auto;
  font-size: 30px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>
<div class="img-holder">
  <i class="fas fa-camera add-img-button"></i>
</div>

【讨论】：