og_image

Центрирование флипбокса для мобильных устройств

Предлагаю такое решение:

@media screen and (max-width: 780px) {
.kc-flip-container .flipper{
	width: 300px !important;
    float: inherit !important;
    top: calc(50% - 150px)!important;
    left: calc(50% - 150px)!important;
	}
}

Здесь отдельно стоит отметить данный блок:

top: calc(50% - 150px)!important;
left: calc(50% - 150px)!important;

top: calc(50% — 150px) (150px — это высота флипбокса деленная на два)

left: calc(50% — 150px) (150px — это ширина флипбокса деленная на два)

ПС. По сути при помощи указания только этих двух свойств можно прекрасно отцентровать практически любой элемент на странице.