How to make an outgoing block with text?

Question

css

The idea is that when you hover the mouse over the block ( event thumb1 ), a block with text ( data ) will pop up.
the text should be centered both vertically and horizontally
, ideally on pure css to do everything

<div class="event thumb1">
  <p class="data">gerzbar 01.01.2015</p>
</div>

.event
      height: 150px
      background-size: cover
      background-position-y: -50px
      overflow: hidden

      .data
        width: 100%
        height: 145px
        margin-top: 0px
        background-color: rgba(0,0,0,.5)
        text-align: center
        vertical-align: middle

at this stage, the problem is that the text does not want to stand vertically in the center

Answer 1

If the text is single-line, then set it line-heightto the height of the block, otherwise something like this