Vertically centering content of :before/:after pseudo-elements

Question

I'm trying to achieve something similar to this picture:

I have an image (as part of a slideshow) wrapped in a div, and with :before and :after pseudo-elements, I display two controls to move onto the next (>>) or previous (<<) images of the slideshow.

So far, I have this:

div {   position: relative; }  div:before {   display:block;   height: 100%;   content: "stuff";   position:absolute;   top: 0; left: 0;   text-align: center; } 

I can't, however, center the content of the pseudo-elements, the text appears like this:

Is this possible to achieve? If not, what would be the most semantic workaround? I do not want to center the element itself, only its content. I'd prefer to have the element stretched to 100% height.

Edit: http://jsfiddle.net/rdy4u/

Edit2: Also, the img is liquid/fluid, the height of the div/img are unknown, and the width is set to 800px and max-width to 80%.

Answer 1

Assuming your element is not an <img> (because pseudo elements are not allowed on self-closing elements), let's suppose it's a <div>, so a way could be:

div {     height: 100px ;     line-height: 100px; } div:before, div:after {     content: "";     ...     display: inline-block;     vertical-align: middle;     height: ...;     line-height: normal; } 

If you cannot change the line-height of the div, another way is:

div {     position: relative; } div:before, div:after {     position: absolute;     display: block;     top: 50%;     -webkit-transform: translateY(-50%);     -moz-transform: translateY(-50%);     -ms-transform: translateY(-50%);     transform: translateY(-50%);     content: "";     width: ... } 

Otherwise, just place the indicators as a background in center position.

Answer 2

Using flex in the pseudo element's css it is rather easy:

.parent::after {   content: "Pseudo child text";   position: absolute;   top: 0;   right: 0;   width: 30%;   height: 100%;   border: 1px solid red;   display:flex;   flex-direction:row;   align-items: center;   justify-content: center; } 

see https://jsfiddle.net/w408o7cq/