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

Существует несколько способов выравнивания блоков по горизонтали в CSS:

1. Использование свойства display: flex; для родительского элемента и свойства justify-content: center; для выравнивания дочерних элементов по центру:

«`
.parent {
display: flex;
justify-content: center;
}

.child {
/* стили дочерних элементов */
}
«`

2. Использование свойства text-align: center; для родительского элемента и свойства display: inline-block; для дочерних элементов:

«`
.parent {
text-align: center;
}

.child {
display: inline-block;
/* стили дочерних элементов */
}
«`

3. Использование свойства margin: 0 auto; для дочерних элементов и задание ширины элемента:

«`
.child {
width: 50%;
margin: 0 auto;
/* стили дочерних элементов */
}
«`

4. Использование свойства display: table; для родительского элемента и свойства display: table-cell; и text-align: center; для дочерних элементов:

«`
.parent {
display: table;
}

.child {
display: table-cell;
text-align: center;
/* стили дочерних элементов */
}
«`