CSS: центрируем по горизонтали
разбираемся с центрированием элемента по горизонтали с помощью CSS
Рассмотрим несколько способов центрирования элемента по горизонтали с помощью CSS
Блок с фиксированной шириной
<p class="center-by-fixed-width">Centering</p>
.center-by-fixed-width {
width: 70px;
margin: 0 auto;
}
Текст
<p class="center-by-text-align">Centering</p>
.center-by-text-align {
text-align: center;
}
Блок без фиксированной ширины
<div class="center-by-unfixed-width">
<span>Centering</span>
</div>
.center-by-unfixed-width {
text-align: center;
}
table
<p class="center-by-table">Centering</p>
.center-by-table {
display: table;
margin: 0 auto;
}
flex
<div class="center-by-flex">
<p>Centering</p>
</div>
.center-by-flex {
display: flex;
justify-content: center;
}
grid
<div class="center-by-grid">
<p>Centering</p>
</div>
.center-by-grid {
display: grid;
justify-content: center;
}
Относительно родителя
<div class="center-by-absolute-parent">
<p class="center-by-absolute-child">Centering</p>
</div>
.center-by-absolute-parent {
position: relative;
}
.center-by-absolute-child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
calc
<p class="center-by-calc">Centering</p>
.center-by-calc {
width: 70px;
margin-left: calc(50% - 35px);
}
align-content
<div class="container-center-by-align-content">
<div class="child-center-by-align-content"></div>
</div>
.container-center-by-align-content {
display: flex;
align-content: center;
}
.child-center-by-align-content {
width: 100px;
height: 100px;
}
Cпасибо за внимание