Возможно создать гибкий контейнер с центрированным контентом?

Question

Я уже несколько раз тянул за волосы, пытаясь придумать следующий макет: круг, динамичный по размеру (отзывчивый), внутри которого сосредоточен контент, как по горизонтали, так и по вертикали. Содержимое будет меняться по длине и, как таковое, должно быть выровнено по вертикали, используя либо метод абсолютного центрирования (http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/#Height), либо подход с табличной ячейкой, оба из которых я не смог добиться успеха.

Моей попытки до сих пор - http://codepen.io/anon/pen/clqzB

Answer 1

Внимательных отношений добавить небольшое затруднение в центрирующих проблемы, но вы были на правильном пути, с помощью padding дать окружности в соотношение 1: 1.

Вы попросили использовать метод абсолютного центрирования или таблицы, но я нашел центрирование Inline-Block (которое я расскажу в статье), чтобы быть самым надежным кросс-браузером для различного содержания длины, что важно, поскольку размер круга всегда меняется, заставляя текст переплавлять.

Это также позволяет использовать padding-bottom: 100% на псевдо-элемент, который уже создан при .Inline-Center класса для установки 1: соотношение окружности 1 и центрирования ваш div.content правильно.

Вот код: http://codepen.io/shshaw/pen/kGdAe