如何在 CSS 中使用 :before 使内容居中

Question

我有以下css代码：

它会在图像上产生悬停。

悬停效果是一个蓝色封面和一个从左侧滑入的白色箭头。

像这样：

悬停：

悬停：

"\f04b" 是白色箭头。如何将图标居中在蓝色框中？我尝试向

添加填充

sidebar-article-thumb:before, .sidebar-best-thumb:before

但它为整个蓝色叠加层添加了填充，而不是里面的白色图标。

如何让图标在蓝色框内居中？

.sidebar-article-thumb img,
.sidebar-best-thumb img {
  border: 1px solid #021a40;
  position: relative;
  max-width: none;
  height: 100%;
  width: auto;
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.sidebar-article-thumb:before,
.sidebar-best-thumb:before {
  content: "\f04b";
  font-family: FontAwesome;
  font-size: 40px;
  color: #fff;
  position: absolute;
  top: 0;
  left: -100%;
  height: 100%;
  width: 100%;
  background: #00ade6;
  z-index: 1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

我发现了以下内容： :before, :after and padding

这似乎相关，但无法弄清楚如何将其应用于上述 css。

Answer 1

Line-height 可以，\f04b 是一个字符。

line-height: 50%;

或

line-height: 100px;

Answer 2

在容器中使用position: relative

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

在伪元素 (:before) 中使字符居中。

示例：

.container {
	position: relative;

	/* Demo */
	width: 300px;
	height: 300px;
	border: 1px solid #000;
}

.container:before {
  content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);

	/* Demo */
	width: 30px;
	height: 30px;
	border: 1px solid #000;
}

<div class="container"></div>

Answer 3

尝试使用vertical-align: middle;

Answer 4

在容器上使用 flexbox 会产生奇迹。

.container {
    align-items: center;
    display: flex;
    justify-content: center;
}

JSFiddle

（我只是生成了自己的箭头，而不是使用font-awesome，但原理还是一样的）