Как выровнять по центру блок в CSS?

Пусть у нас есть элемент div, внутри которого есть другой div:

<div class="box">
    <div class="box-content"></div>
</div>

Рассмотрим различные способы выравнивания внутреннего блока по центру внешнего в зависимости от исходных данных.

Как выровнять блок по горизонтали?

1. Выравнивание по горизонтали при помощи фиксированных отступов

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

(ширина_внешнего_блока — ширина_внутреннего_блока) / 2

И указать в стилях конкретные значения:

.box {
    width: 1000px;
}
.box-content {
    width: 500px;
    margin-left: 250px; /* отступ справа вычисляется сам */
}

То же самое возможно использовать и с процентами, ширина внешнего блока при этом принимается за 100%: например, ширина внутреннего блока 60%, значит размер отступов будет равен 20%:

.box-content {
    width: 60%;
    margin-left: 20%;
}

Если же у внутреннего блока известны размеры отступов, а ширина неизвестна, то достаточно будет указать только отступы, но уже не только слева, а с обеих сторон. В этом случае ширина блока будет вычислена по отступам:

.box-content {
    margin: 20%;
}

2. Горизонтальное выравнивание при помощи произвольных отступов

Если внутренний блок имеет фиксированную ширину, то чтобы его отцентрировать по горизонтали, достаточно указать отступы справа и слева как auto:

.box-content {
    width: 500px;
    margin: 0 auto;
}

Если вложенный элемент .box-content является строчным (img, a, span и др.), то для него понадобится указать display:

.box-content {
    width: 500px;
    margin: 0 auto;
    display: block;
}

3. Использование text-align у внешнего блока

text-align также позволяет выполнить выравнивание по горизонтали, в первую очередь он используется для текста. 

Например, в данном случае:

<div class="text-box">
    <p>Какой-то текст</p>
</div>

Выравнивания по центру можно достичь, указав text-align для .text-box:

.text-box {
    text-align: center;
}

4. Горизонтальное выравнивание блока при помощи абсолютного позиционирования

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

.box {
    position: relative;
}
.box-content {
    position: absolute;
    left: 50%;
    width: 500px;
    margin-left: -250px;
}

Как выровнять блок по вертикали?

1. Выравнивание текста из 1 строки по вертикали

Если есть блок, в котором размещен текст, занимающий не больше 1 строки (например, кнопка или пункт меню) и известна высота этого блока, то можно задать line-height, равный этой высоте.

Например, для такой структуры:

<div class="menu-item">Пункт меню</div>

Выравнивание по вертикали будет выглядеть следующим образом:

.menu-item {
    height: 32px;
    line-height: 32px;
}

2. Вертикальное выравнивание блока при помощи абсолютного позиционирования

Вертикальное выравнивание блока делается по аналогии с горизонтальным, однако здесь вместо ширины внутреннего блока нужно знать его высоту, а отступы указывать не слева, а сверху.

.box {
    position: relative;
}
.box-content {
    position: absolute;
    top: 50%;
    height: 500px;
    margin-top: -250px;
}

Также можно указать позиции со всех сторон, равные 0, если известны ширина и высота блока, и такой вариант также будет работать:

.box {
    position: relative;
}
.box-content {
    width: 300px;
    height: 200px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

3. Табличное выравнивание по вертикали

Как известно, в таблицах работает vertical-align для выравнивания их контента по высоте.

<div class="table">
    <div class="table-row">Какие-то данные</div>
</div>

Если использовать display: table в стилях, то возможно добиться того же:

.table {
    display: table;
    width: 100%;
}
.table-row {
    height: 80px;
    display: table-cell;
    vertical-align: middle;
}

4. Вертикальное выравнивание при помощи CSS3-трансформации

CSS3 позволяет выполнять выравнивание буз необходимости добавления внешних блоков. Достаточно иметь один блок:

<div class="box">Какие-то данные</div>

Стили для него будут выглядеть следующим образом, если у него известны высота и ширина:

.box {
    width: 300px;
    height: 200px;
    position: absolute; 
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
}

Если же размеры блока неизвестны, то внешний блок становится нужен:

<div class="box">
    <div class="box-content">Какие-то данные</div>
</div>

И стили определяются так:

.box-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}