marcin7848 marcin7848 - 4 months ago 12
CSS Question

Centered div all the time

I have something like this:



.center_position_div{
width:100%;
background-color:green;
display: flex;
flex-wrap: wrap;
}

.show_running_exam
{
width: 22%;
background-color:aliceblue;
margin-left: 1%;
margin-right: 1%;
margin-bottom: 5px;
margin-top: 6px;
overflow: hidden;
}

<div class="center_position_div">
<div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
<div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
<div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
<div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
<div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
<div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
<div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
<div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
<div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
<div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>


</div>





How can I center divs on the middle parent div? I assume that in the parent div can exist many divs. I could use "padding-left" in parent div, but this is not a universal solution. I tried use "marging: 0 auto;" - still not working. What can I do?

Answer Source

I believe you're looking to set the content justification. Applying justify-content: center; to the parent container should do the trick.

.center_position_div {
  width: 100%;
  background-color: green;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.show_running_exam {
  width: 22%;
  background-color: aliceblue;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 5px;
  margin-top: 6px;
  overflow: hidden;
}
<div class="center_position_div">
  <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
  <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
  <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd sfdsfdsfsdfd sfdsfsd sfdsfdsfsdfd sfdsfsd</div>
  <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
  <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
  <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
  <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
  <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
  <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>
  <div class="show_running_exam">saddsdsadsdsdf dsfsdfd sfdsfdsfsdfd sfdsfsd</div>


</div>