Div needs to be centered [duplicate] - html

Question

This question already has answers here:
Center a column using Twitter Bootstrap 3
(34 answers)
How do you get centered content using Twitter Bootstrap?
(24 answers)
Closed 4 years ago.
See the blank space I marked with red arrow, I want these divs to be centered. But it's floating to left. I placed all these divs to middleBox div and in middleBox I styled text-align: center but nothing worked.
Help me out guys
My HTML
#middleBoxMargin {
margin-top: 80px;
}
#middleBox {
text-align: center;
}
#groupInsurance {
background-color: #EEEEEE;
text-align: center;
height: 145px;
}
#lifeInsurance {
background-color: #EEEEEE;
text-align: center;
height: 145px;
}
#dentalInsurance {
background-color: #EEEEEE;
text-align: center;
height: 145px;
}
#replacementInsurance {
background-color: #EEEEEE;
text-align: center;
height: 145px;
}
<div class="container">
<div class="row">
<div class="col-sm-12" id="middleBoxMargin">
<div id="middleBox">
<div class="col-sm-2">
<div id="groupInsurance"></div>
</div>
<div class="col-sm-2">
<div id="lifeInsurance"></div>
</div>
<div class="col-sm-2">
<div id="dentalInsurance"></div>
</div>
<div class="col-sm-2">
<div id="replacementInsurance"></div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Add
display: flex;
justify-content: center;
#middleBoxMargin {
margin-top: 80px;
}
#middleBox {
display: flex;
justify-content: center;
}
#groupInsurance {
background-color: #EEEEEE;
text-align: center;
height: 145px;
}
#lifeInsurance {
background-color: #EEEEEE;
text-align: center;
height: 145px;
}
#dentalInsurance {
background-color: #EEEEEE;
text-align: center;
height: 145px;
}
#replacementInsurance {
background-color: #EEEEEE;
text-align: center;
height: 145px;
}
<div class="container">
<div class="row">
<div class="col-sm-12" id="middleBoxMargin">
<div id="middleBox">
<div class="col-sm-2">
<div id="groupInsurance"></div>
</div>
<div class="col-sm-2">
<div id="lifeInsurance"></div>
</div>
<div class="col-sm-2">
<div id="dentalInsurance"></div>
</div>
<div class="col-sm-2">
<div id="replacementInsurance"></div>
</div>
</div>
</div>
</div>
</div>

Answer 2

If you are using boostrap 4, adding a class justify-content-md-center to the div with row class would do the job. But seems like you are using bootstrap 3, so you can use the offset class. Try updating your code this way.
<div class="container">
<div class="row">
<div class="col-sm-12" id="middleBoxMargin">
<div class="row" id="middleBox">
<div class="col-sm-2 col-sm-offset-2">
<div id="groupInsurance"></div>
</div>
<div class="col-sm-2">
<div id="lifeInsurance"></div>
</div>
<div class="col-sm-2">
<div id="dentalInsurance"></div>
</div>
<div class="col-sm-2">
<div id="replacementInsurance"></div>
</div>
</div>
</div>
</div>
</div>

Answer 3

you can use flex for that
#middleBox {
display: flex;
justify-content:center
}
.col {
padding: 0 15px;
}
.box {
background-color: #EEEEEE;
text-align: center;
height: 100px;
width: 100px;
}
<div class="container">
<div id="middleBox">
<div class="col">
<div id="groupInsurance" class="box"></div>
</div>
<div class="col">
<div id="lifeInsurance" class="box"></div>
</div>
<div class="col">
<div id="dentalInsurance" class="box"></div>
</div>
<div class="col">
<div id="replacementInsurance" class="box"></div>
</div>
</div>
</div>
or even better you can use grid
#middleBox {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-gap: 15px;
justify-content: center;
}
.box {
background-color: #EEEEEE;
text-align: center;
height: 100px;
width: 100%;
}
<div class="container">
<div id="middleBox">
<div id="groupInsurance" class="box"></div>
<div id="lifeInsurance" class="box"></div>
<div id="dentalInsurance" class="box"></div>
<div id="replacementInsurance" class="box"></div>
</div>
</div>

Answer 4

I'll do that kind of things:
div {
border: 1px solid black;
}
#middleBoxMargin {
margin-top: 80px;
}
#middleBox {
display: flex;
justify-content: center;
}
#middleBox > div {
background-color: #EEEEEE;
text-align: center;
height: 145px;
width: 20%;
margin: 5px 10px;
}
<div class="container">
<div class="row">
<div class="col-sm-12" id="middleBoxMargin">
<div id="middleBox">
<div class="col-sm-2">
<div id="groupInsurance"></div>
</div>
<div class="col-sm-2">
<div id="lifeInsurance"></div>
</div>
<div class="col-sm-2">
<div id="dentalInsurance"></div>
</div>
<div class="col-sm-2">
<div id="replacementInsurance"></div>
</div>
</div>
</div>
</div>
</div>
Note that the CSS is shorter, and some of your classes in html useless now.