如何使图标在响应平方div中保持中心位置？

Question

我有一个div，它是一个正方形，不管设备是什么，它都是正方形。我需要在这个广场中放置一个FontAwesome图标，我需要图标在所有屏幕中保持中心位置。出于某种原因我没能做到这一点。

在桌面上，它看起来很好，您可以在水平和垂直中心看到图标：

​

​

在移动中，它看起来像下面的图像，图标不再是居中的：

​

​

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

Answer 1

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

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

字体是使用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 2

​

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

​

Answer 3

只需更改.按钮如下

.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转换来调整对象的中心位置。

这是一支钢笔