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

Пытаясь выполнить:

введите описание изображения здесь

Я попробовал несколько разных подходов к этому, один из которых ( jsfiddle ). Это близко, но было интересно, есть ли способ начать новый ряд из центра, работая, это выход?

Код у меня в настоящее время есть:

HTML

{amp}lt;div class="list"{amp}gt; {amp}lt;div class="col-3 mx-auto"{amp}gt; {amp}lt;div class="card card-body mb-2"{amp}gt; {amp}lt;h6{amp}gt;I'm .col-4{amp}lt;/h6{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-3 mx-auto"{amp}gt; {amp}lt;div class="card card-body mb-2"{amp}gt; {amp}lt;h6{amp}gt;I'm .col-4{amp}lt;/h6{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-3 mx-auto"{amp}gt; {amp}lt;div class="card card-body mb-2"{amp}gt; {amp}lt;h6{amp}gt;I'm .col-4{amp}lt;/h6{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-3 mx-auto"{amp}gt; {amp}lt;div class="card card-body mb-2"{amp}gt; {amp}lt;h6{amp}gt;I'm .col-4{amp}lt;/h6{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-3 mx-auto"{amp}gt; {amp}lt;div class="card card-body mb-2"{amp}gt; {amp}lt;h6{amp}gt;I'm .col-4{amp}lt;/h6{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-3 mx-auto"{amp}gt; {amp}lt;div class="card card-body mb-2"{amp}gt; {amp}lt;h6{amp}gt;I'm .col-4{amp}lt;/h6{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

CSS:

 .landing-types .content-list .list { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .landing-types .content-list .list .col-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .landing-types .content-list .list .mx-auto { margin-left: auto !important; margin-right: auto !important; } 

Да, есть. Просто оберните флексбоксы и используйте justify-content: center (выровнять по центру по горизонтали) и align-items: center (выровнять по центру по вертикали).

Вот минимальный рабочий пример:

 * { box-sizing: border-box; margin: 0; padding: 0; font-family: Helvetica, sans-serif; } html, body { width: 100%; height: 100%; } body { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; } .column { width: 13%; /* Change this value to experiment */ padding: 20px; margin: 20px; text-align: center; background: #000; color: #FFF; } 
 {amp}lt;div class = "column"{amp}gt; 1 {amp}lt;/div{amp}gt; {amp}lt;div class = "column"{amp}gt; 2 {amp}lt;/div{amp}gt; {amp}lt;div class = "column"{amp}gt; 3 {amp}lt;/div{amp}gt; {amp}lt;div class = "column"{amp}gt; 4 {amp}lt;/div{amp}gt; {amp}lt;div class = "column"{amp}gt; 5 {amp}lt;/div{amp}gt; {amp}lt;div class = "column"{amp}gt; 6 {amp}lt;/div{amp}gt; {amp}lt;div class = "column"{amp}gt; 7 {amp}lt;/div{amp}gt; {amp}lt;div class = "column"{amp}gt; 8 {amp}lt;/div{amp}gt; {amp}lt;div class = "column"{amp}gt; 9 {amp}lt;/div{amp}gt; {amp}lt;div class = "column"{amp}gt; 10 {amp}lt;/div{amp}gt; {amp}lt;div class = "column"{amp}gt; 11 {amp}lt;/div{amp}gt; {amp}lt;div class = "column"{amp}gt; 12 {amp}lt;/div{amp}gt; 

Если у вас нет, вам нужно прочитать это руководство о flexbox: здесь

Это не относится к flexbox, но я рекомендую прочитать о сетках: здесь

это оно:

HTML:

 {amp}lt;div class="flex-container"{amp}gt; {amp}lt;div{amp}gt;1{amp}lt;/div{amp}gt; {amp}lt;div{amp}gt;2{amp}lt;/div{amp}gt; {amp}lt;div{amp}gt;3{amp}lt;/div{amp}gt; {amp}lt;div{amp}gt;4{amp}lt;/div{amp}gt; {amp}lt;div{amp}gt;5{amp}lt;/div{amp}gt; {amp}lt;div{amp}gt;6{amp}lt;/div{amp}gt; {amp}lt;div{amp}gt;7{amp}lt;/div{amp}gt; {amp}lt;div{amp}gt;8{amp}lt;/div{amp}gt; {amp}lt;div{amp}gt;9{amp}lt;/div{amp}gt; {amp}lt;div{amp}gt;10{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

CSS:

 .flex-container { display: flex; flex-direction:row; flex-wrap: wrap; max-width:350px; justify-content:center; } .flex-container {amp}gt; div { background-color: #194f27; margin: 10px; padding: 20px; font-size: 30px; } 

проверьте: https://jsfiddle.net/yfvp5m69/24/