How to vertically center on hover element text? - html

Question

I have a text element that appears over the image on mouseover. The text bit is horizontally centered but I'm still having troubles centering it vertically despite trying several techniques. Trying to achieve this without Javascript.
HTML:
<figure class="wp-caption-my">
<img class="demo-my" src="image.png" alt="Image" />
<figcaption class="wp-caption-text-my">This is a caption text</figcaption>
</figure>
CSS:
.wp-caption-my {
position: relative;
padding: 0;
margin: 0;
}
.wp-caption-my img {
display: block;
max-width: 100%;
height: auto;
}
.wp-caption-text-my {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
color: #fff;
left: 0;
bottom: 0;
padding: 0.75em 1em;
font-weight: 700;
z-index: 2;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: rgba(0,191,255,0.9);
text-align: center;
-webkit-transition: opacity .3s ease-in-out !important;
transition: opacity .3s ease-in-out !important;
}
.wp-caption-my:hover .wp-caption-text-my {
opacity: 1;
}
img.demo-my {
width: 100% !important;
height: 100% !important;
}

Answer 1

I think you can use CSS pseudo elements this way:
.wp-caption-my {
position: relative;
padding: 0;
margin: 0;
}
.wp-caption-my img {
display: block;
max-width: 100%;
height: auto;
}
.wp-caption-text-my {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
color: #fff;
left: 0;
bottom: 0;
padding: 0.75em 1em;
font-weight: 700;
z-index: 2;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: rgba(0,191,255,0.9);
text-align: center;
-webkit-transition: opacity .3s ease-in-out !important;
transition: opacity .3s ease-in-out !important;
}
.wp-caption-my:hover .wp-caption-text-my {
opacity: 1;
}
.wp-caption-text-my::before {
content: "";
display: inline-block;
width: 0px;
height: 100%;
vertical-align: middle;
}
.wp-caption-text-my span {
display: inline-block;
vertical-align: middle;
}
img.demo-my {
width: 100% !important;
height: 100% !important;
}
<figure class="wp-caption-my">
<img class="demo-my" src="http://janisweb.tk/grahams/wp-content/uploads/2016/07/officewaste.png" alt="Image" />
<figcaption class="wp-caption-text-my"><span>This is a caption text</span></figcaption>
</figure>
This is done by wrapping your text in a span and adding this CSS to your styles:
.wp-caption-text-my::before {
content: "";
display: inline-block;
width: 0px;
height: 100%;
vertical-align: middle;
}
.wp-caption-text-my span {
display: inline-block;
vertical-align: middle;
}

Answer 2

Wrap the text inside another element, and set top:
HTML
<figcaption class="wp-caption-text-my"><h3>This is a caption text</h3></figcaption>
CSS
.wp-caption-text-my h3 {
position: relative;
top: 50%;
line-height: 18px;
margin-top: -18px;
}
Check it with more text:
Codepen: https://codepen.io/anon/pen/LkAyEd

Answer 3

Aligning your text to the center of your image, using pseudo element :before on-hover.
.wp-caption-text-my:before{
content:'';
display:block;
width:100%;
height:50%;
background:#f22;
}
I have added background color to pseudo element, so you could understand what it does and then you can align it accordingly to your needs.
.wp-caption-my {
position: relative;
padding: 0;
margin: 0;
}
.wp-caption-my img {
display: block;
max-width: 100%;
height: auto;
}
.wp-caption-text-my {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
color: #fff;
left: 0;
bottom: 0;
padding: 0.75em 1em;
font-weight: 700;
z-index: 2;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: rgba(0,191,255,0.9);
text-align: center;
-webkit-transition: opacity .3s ease-in-out !important;
transition: opacity .3s ease-in-out !important;
}
.wp-caption-text-my:before{
content:'';
display:block;
width:100%;
height:50%;
background:#f22;
}
.wp-caption-my:hover .wp-caption-text-my {
opacity: 1;
}
img.demo-my {
width: 100% !important;
height: 100% !important;
}
<figure class="wp-caption-my">
<img class="demo-my" src="https://source.unsplash.com/random" alt="Image" />
<figcaption class="wp-caption-text-my">This is a caption text
<figcaption style="padding-top:5px;">Add such more captions</figcaption>
<figcaption style="padding-top:5px;">And style them as you want.</figcaption>
</figcaption>
</figure>

Answer 4

To center horizontally and vertically an absolute element you can easily do
position: absolute
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
fiddle here: http://jsfiddle.net/mBBJM/1/
from https://codemyviews.com/blog/how-to-center-anything-with-css#comment-684580538