How to vertically center a Bootstrap carousel-caption?

Question

I have a bootstrap carousel and I am trying to create a caption for the carousel that is always vertically centered and positioned slightly to the left. I have the css for t

Answer 1

You can use the translateY function of the CSS property transform to vertically align elements. Browser support is quite decent, including IE9. Therefore just add the following to your .carousel-caption CSS.

top: 50%;
transform: translateY(-50%);

Now you need to get rid of the extra bottom space, added by the default bootstrap CSS. Add the following as well to your .carousel-caption CSS.

bottom: initial;

And last but not least give the parent element, in this case .item, the following CSS to prevent blurry elements when it's placed on half a pixel.

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;

Working Example