Выравнивание таблицы CSS зависит от того, как именно нужно выровнять ее содержимое. Как правило, наиболее популярным способом выравнивания таблицы является горизонтальное и вертикальное центрирование. Вот несколько способов достижения этого:
Горизонтальное выравнивание:
- Используйте свойство
marginсо значениемautoдля элементаtableи установите ему фиксированную ширину.
table {
width: 80%;
margin: 0 auto;
}
- Используйте свойства
displayиmarginсо значениемautoдля элементаtable.
.table-wrapper {
display: table;
margin: 0 auto;
}
- Используйте свойство
text-alignсо значениемcenterдля родительского элемента таблицы.
.table-wrapper {
text-align: center;
}
Вертикальное выравнивание:
- Используйте свойство
displayсо значениемtable-cell,vertical-alignсо значениемmiddleиtext-alignсо значениемcenterдля элементовtdиth.
td, th {
display: table-cell;
vertical-align: middle;
text-align: center;
}
- Используйте свойство
displayсо значениемflex,align-itemsсо значениемcenterиjustify-contentсо значениемcenterдля родительского элемента таблицы.
.table-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
- Используйте свойство
positionсо значениемabsolute,top,bottom,leftиrightсо значением0иmarginсо значениемautoдля элементаtable.
table {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
}
Необходимо заметить, что при вертикальном выравнивании таблицы необходимо задать ей высоту. В противном случае, выравнивание не будет работать.





