/*<div class="content">This works with any content</div>*/
.content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}.row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
.block {
width: 100px;
}<div class="center">this content will be in the horizontally centered of your page</div>
<style>
/** this is the css to center a DIV or any element **/
.center {
display: table;
margin: 0 auto;
}
</style>.row {
width: 100%;
text-align: center; // center the content of the container
}
.block {
width: 100px;
display: inline-block; // display inline with ability to provide width/height
}.inner{
margin: 0 auto;
}<div class="row">
<div class="block">Lorem</div>
<div class="block">Ipsum</div>
<div class="block">Dolor</div>
</div>