В этом записи я поделюсь вариантом того, как можно сделать блок по центру с помощью jQuery или CSS.

Я покажу вам как это сделать с помощью jQuery и CSS.

jQuery

Чтобы было удобно пользоваться центрированием с помощью jQuery, нужно написать небольшой плагин, который представлен ниже.

Вы можете его сохранить в отдельный .js файл и подключить в <head></head> или просто указать код между <script></script>.

jQuery.fn.center = function(parent) {
    if (parent) {
        parent = this.parent();
    } else {
        parent = window;
    }
    this.css({
        "position": "absolute",
        "top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
        "left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
    });
return this;
}

Если вы хотите центрировать блок по родительскому элементу, то вам нужно указывать true (как аргумент метода .center()), если нет — false. Пример того как использовать данный снипет показан ниже:

<script> 
    // центрировать по родителю 
    $('ваш элемент').center(true);

    // центрировать экраню пользователя
    $('ваш элемент').center(false);
</script>

На место $('ваш элемент') вписывается элемент, который вы хотите расположить по центру.

jQuery демо

Первый квадрат «1 родитель» (.center(true)) находится внутри родительского элемента .container-demo-jquery, тем самым он по центру родительского элемента. Второй квадрат «2 окно браузера» (.center(false)) центрируется по экрану пользователя (то есть вне зависимости от родительских элемента).

Посмотреть демо на jsfiddle.

Кроссбраузерность

jQuery гарантирует 100% кроссбраузерность. Тем самым, элемент, для которого стоит центрирование будет корректно отображаться на всех устройствах.

CSS

Блок так же можно выравнивать с помощью CSS. Ниже показан пример того как это можно сделать:

.center {
    position: fixed;
    top:calc(50% - 50px/2); /* высота деленная на 2*/
    left:calc(50% - 50px/2); /* высота деленная на 2*/
}

После чего можно указать класс .center для какого-нибудь элемента. Как показано на примере ниже.

<div class="center"></div>

Кроссбраузерность

CSS версия центрирования является кроссбраузерной на всех версиях современных браузеров. IE8 и ниже не поддерживаются в данном случается придется пользоваться альтернативным способом, например jQuery.