Я пытаюсь выровнять свой div по центру страницы, но не могу понять, как это сделать, используя параметр выравнивания.
html:
<div class = "flex-container">
<div class = "box" *ngFor='let movie of moviesArray;let i=index'>
....
</div>
</div>
css:
.flex-container{
display: flex;
background-color: white;
flex-flow: column;
flex-wrap: wrap;
margin:0 auto;
}
.box{
width:80%;
flex: 0 0 100px;
background-color:#f4f4f4;
margin:10px 0;
padding:20px;
}
....
Ценю любую помощь :)






Когда вы находитесь в flex-direction: column, основная ось переключается на вертикальное выравнивание, а justify-content работает вверх / вниз, а не влево / вправо.
Используйте align-items для центрирования по горизонтали в flex-direction: column.
Подробнее здесь: Почему в CSS Flexbox нет свойств «justify-items» и «justify-self»?
.flex-container{
display: flex;
background-color: white;
flex-flow: column;
flex-wrap: wrap;
margin:0 auto;
}
.box{
display: flex;
align-items: center;
justify-content: center;
width:80%;
flex: 0 0 100px;
background-color:#f4f4f4;
margin:10px 0;
padding:20px;
}<div class = "flex-container">
<div class = "box" *ngFor='let movie of moviesArray;let i=index'>
..................
</div>
</div>
добавить класс бокса для отображения: flex, justify-content для центрирования по горизонтали и align-items для центрирования по вертикали