Поиск по этому блогу

вторник, 25 августа 2015 г.

CSS Show div on center

Выровнять DIV по середине экрана возможно различными методами как при помощи CSS так и при помощи jQuery.

При помощи jQuery 

   jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", (jQuery(window).height()-this.height())/2+jQuery(window).scrollTop()+"px");
    this.css("left", (jQuery(window).width()-this.width())/2+jQuery(window).scrollLeft()+"px");
    return this;

При помощи CSS

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 48%;
  height: 59%;
}

Чтобы работало на iOS

Для того чтобы работало в iOS устройствах необходимо добавить следующие строчки.
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

Конечный вариант CSS
.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 48%;
  height: 59%;
}

Источники

1. http://stackoverflow.com/questions/27303339/transform-not-working-on-ios

Комментариев нет:

Отправить комментарий