使文本以绝对位置块为中心

Question

HTML：

<div style="width:200px;height:200px;background:yellow;position:relative">
    <span class="hover-content">
        <span>+</span>
    </span>    
</div>

CSS：

.hover-content{position:absolute;display:none}
div:hover .hover-content{display:block}

div的宽度和高度是动态的，由javascript-events更改。我的目标是使+标志出现在div的中心，不管它如何变化。我想知道这是否可以仅仅通过CSS来完成。

JSfiddle:http://jsfiddle.net/1pwww691/

Answer 1

通过将hover-content元素显示为表，并以表单元格的形式显示内部的跨度，您将得到所需的结果：

.hover-content {
  display: table;
  width: 100%;
  height: 100%;
}

.hover-content span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

下面是活生生的例子：http://codepen.io/TheDutchCoder/pen/GggWqP

Answer 2

这是IE8+的标准方法

​

.hover-content {
    position:absolute;
    display:none;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}
div:hover .hover-content {
    display:block
}

<div style="width:200px;height:200px;background:yellow;position:relative"> <span class="hover-content">
        <span>+</span>
</span>
</div>

​