css - 使文本在绝对定位 block 中居中

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 事件改变。我的目标是让 + 符号出现在 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