Question

我正在尝试在某些链接上创建叠加层，当您将鼠标悬停在放大镜上时，它会显示放大镜作为叠加层。

为简单起见，我在这里创建了一个小提琴：https://jsfiddle.net/rw4hngvj/1/

我能够将放大镜图标水平居中，但我不能垂直居中，它始终位于元素的顶部。我已尝试设置vertical-align:middle和top:50%，但这些都不起作用。

我的一个限制是我根本无法更改HTML，我只能更改:before伪元素的css。

我有什么办法可以将:before的内容集中在一起吗？

Answer 1

将position:relative;添加到.caption:before。

您需要将position属性与top一起使用。

Answer 2

将这些属性添加到：before元素中，应将其居中。（根据您当前的代码）以下说明。

transform: translateY(-50%);
position: absolute;
left: 0;
right: 0;

位置：绝对是KEY。

使用position：absolute，left：0，right：0和margin：0 auto的组合（这就像说：margin-left：auto，margin-right：auto，margin-top / bottom：0）使你的元素水平居中。

使用position：absolute，top：50％，transform：translateY（-50％）垂直居中你的元素。

还有其他方法可以做到这一点，但这是最快的方式，无需修改您当前的CSS。

你最终的css标题：之前应该是这样的：

.caption:before {
    content: "\f002";
    font-family: 'FontAwesome';
    color: #ffffff;
    font-size: 2em;
    top: 50%;
    margin: 0 auto;
    display: block;
    transform: translateY(-50%);
    position: absolute;
    left: 0;
    right: 0;
}

Answer 3

添加position .caption:before

.caption:before {
    content: "\f002";
    font-family: 'FontAwesome';
    color: #ffffff;
    font-size: 2em;
    /* vertical-align: middle; */    
    top: 50%;
    left:50%;
    margin: -16px 0 0 -16px;
    display: block;
    position: absolute;
}

https://jsfiddle.net/rw4hngvj/3/

Answer 4

如果您可以使用flexbox，只需试试这个

.caption
{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content:center;
    flex-direction:both;
    align-items:center;
    opacity: 0;
    background: rgba(0,0,0,.6);
    text-align: center;
    cursor: pointer;
}

Answer 5

a.tile
{
    position: relative;
    display: block;
    width: 150px;
    height: 150px;    
    background-color: green;
}
.caption
{
    width: 100%;
    height: 100%;
    opacity: 0;
    display: block;
    background: rgba(0,0,0,.6);
    text-align: center;
    cursor: pointer;
}

.caption:hover {
    opacity: 1;
}

.caption:before {
    content: "\f002";
    font-family: 'FontAwesome';
    color: #ffffff;
    font-size: 2em;
    top: 0; left: 0; bottom: 0; right: 0;
    display: block;
    width: 1em;
    height: 1em;
    overflow: auto;
    margin: auto;
    position: absolute;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

<a class="tile">
  <div class="caption">
  </div>
</a>
<a class="tile">
  <div class="caption">
  </div>
</a>

垂直对齐内容：伪元素之前

5 个答案: