make text centered in an absolute positioned 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}

The div's width and height are dynamic, being changed by javascript-events. My goal is to make the + sign appear at the center of the div, no matter how it changes. I wonder if this can be done by mere CSS.

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

Doesn't this (http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) answer your question ? — merours, Nov 19 '14 at 16:18

score 2 · Accepted Answer · answered Nov 19 '14 at 16:25

By making the hover-content element display as a table, and the span inside as a table-cell, you'll get the result you want:

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

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

Here's the live example: http://codepen.io/TheDutchCoder/pen/GggWqP

score 1 · Answer 2 · answered Nov 19 '14 at 16:20

1

Here's the standard way for 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>

answered Nov 19 '14 at 16:20

Paulie_D

107,962
13
142
161

Doesn't support ie8 +1 although :) – Alex Char Nov 19 '14 at 16:24
Added comment re support. – Paulie_D Nov 19 '14 at 16:26
IE9 need the -ms- prefix as well and safari (plus some others) still need the -webkit- prefix. Keep in mind that transform won't change the actual position of the element in the flow (not a problem in this case). – Reinier Kaper Nov 19 '14 at 16:29
In my actual case, transform seems a better solution – shenkwen Nov 19 '14 at 16:57

make text centered in an absolute positioned block

2 Answers2