body { background: #0C2939; font-size: 80%; } main { background: white; margin: 20px 0; padding: 10px; } main div { background: black; color: white; padding: 15px; max-width: 125px; margin: 5px; } .inline-block-centralizado { text-align: center; } .inline-block-centralizado div { display: inline-block; text-align: left; } .flex-centralizado { display: flex; justify-content: center; }
<main class="inline-block-centralizado"> <div> Eu sou um elemento block assim com meus irmãos e nós estamos centralizados. </div> <div> Eu sou um elemento block assim com meus irmãos e nós estamos centralizados. Eu tenho mais conteúdo do que o meus irmãos. </div> <div> Eu sou um elemento block assim com meus irmãos e nós estamos centralizados. </div> </main> <main class="flex-centralizado"> <div> Eu sou um elemento block assim com meus irmãos e nós estamos centralizados. </div> <div> Eu sou um elemento block assim com meus irmãos e nós estamos centralizados. Eu tenho mais conteúdo do que o meus irmãos. </div> <div> Eu sou um elemento block assim com meus irmãos e nós estamos centralizados. </div> </main>