一直以居中为中心

Question

我有这样的事情：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如何将div放在中间父div上？我假设在父div中可以存在很多div。我可以使用＆＃34; padding-left＆＃34;在父div中，但这不是一个通用的解决方案。我尝试使用＆＃34; marging：0 auto;＆＃34; - 还是行不通。我该怎么办？

Answer 1

我相信您正在寻找内容合理性。将justify-content: center;应用于父容器应该可以解决问题。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是你在找什么？

＆＃13;

＆＃13;

.center_position_div{
        width:100%;
        background-color:green;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
    }
    
    .show_running_exam
    {
        width: 22%;
        background-color:aliceblue;
        margin-left: 1%;
        margin-right: 1%;
        margin-bottom: 5px;
        margin-top: 6px;
        overflow: hidden;
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;