Центрирование в CSS

Очень часто, мы не знаем ширину и высоту элемента, зачастую это соз­даётся специаль­но, так как хочется достичь адаптивность макета малыми затратами. На практике хорошо зарекомендовал себя следющий "css trick": у нас есть возможность использовать свойство преобразования с отрицательными значениями 50% в обоих направлениях (основано на текущей ширине / высоте элемента) до центра:
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Demo
16 июня 2015, 18:21