如何使图标在响应式平方 div 中居中？

Question

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

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

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

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

Answer 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 平移调整到对象的中心。

here's a pen

Answer 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;
}

Answer 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>

如何使图标在响应式平方 div 中居中？

How to make icon stay centered in responsive squared div?

html

css

font-awesome

bootstrap-4