Как выравнить блок с текстом и иконкой по вертикали в bootsrape?

Question

[OldSchoolWeb]

Помогите выравнить иконку с текстом по вертикали центра блока square

<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                    <div class="square bcolor">
                        <div class="info">
                            <div class="info-icon"><i class="fa fa-desktop fa-2x"></i></div>
                            <div class="info-title"><a href="#">design</a></div>
                        </div>
                    </div>
                </div>

.square {min-width: 270px;height: 270px;text-align: center;text-transform: uppercase;}
	/*color settings*/
	.bcolor {background-color: #10c6fc;}

Выглядит вот так это

Answer 1

[Андрей]

https://jsfiddle.net/1kbsvcu4/

Comments

[OldSchoolWeb]

так и знал, что через display: table; :(
Спасибо за помощь)

[Андрей]

OldSchoolWeb: можно и не table https://jsfiddle.net/1kbsvcu4/1/

[OldSchoolWeb]

Кхм, а разве через Position не более правильней будет, чем перед таблицей?
Вроде бы display: table нигде не используется уже

[Андрей]

OldSchoolWeb: если не нужна поддержка IE8 то можно и через translateY как во втором варианте. но у меня были случаи когда смазывались шрифты

[Сергей Карвасарный]

Андрей: 2 вариант не верный, когда ты задаешь top: 50% нужно сделать margin-top: -Значение px;а значение это 50% высоту текстового блока к примеру, тогда будет по центру, а так не по центру)

[Андрей]

Сергей Карвасарный: как не верный? там же ссылка есть и все по центру. чем не устраивает transform: translateY(-50%);

[Сергей Карвасарный]

Андрей: извиняюсь, не заметил)