Another good approach, not so simple as line-height though. However it needs inner block to by fixed height so negative margin-top can be set. And it needs additional block to center text block horizontally.

This is a great approach if you have container with variable height, this method will certainly work in this case! Downside of this method is that it will not work in older versions of IE. Also it needs additional block to center text block horizontally. Another pros is that it will expand if inner-block content height will became bigger than outer block.

If you need it to work in older IE versions you can use explicit table tags instead of div blocks:

Summary

To summary this methods, I would say the best way for responsive designs is table cell method. Despite it doesn’t support old versions of IE this is virtually the only method to fully center block vertically for responsive design without JavaScript snippets. Two other ways always require outer or inner block to have fixes height value.

And at last we set different delays for each slide to make it work. Each slide must have slides delay durations multiplied by slide position – 1, or just each next slide’s delay equals previous plus delay duration.

Ok it looks good, but it has a big con, if you want to change slides count, delays or transitions duration you have to recalculate keyframes positions change duration and add or remove delays for each slide. That’s why it’s not very usable in real production projects.

Until some generator will be used, I will add SASS generator here next time.

And here is promised SASS mixin, I’ve improved it a little by adding z-indexes: