如何在div中将所有位置元素居中

Question

我有.child_div元素，并且它有绝对项，所以我想正确地放在.child_div（绿色背景）元素内部。

.parent_div {
  position: relative;
  background: lightgreen;
  width: 1200px;
  margin: auto;
}

.child_div {
  position: relative;
  height: 200px;
  margin: auto;
  display: flex;
  justify-content: center;
}

.item {
  width: 80px;
  height: 80px;
  position: absolute;
}

.item1 {
  background: orange;
  left: 20%;
}

.item2 {
  background: yellow;
  left: 25%;
}

.item3 {
  background: blue;
  left: 30%;
}

.item4 {
  background: red;
  left: 35%;
}

<div class="parent_div">
  <div class="child_div">
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
    <div class="item item4"></div>
  </div>
</div>

Answer 1

删除position: absolute和不必要的margin和left值，即可获得所需的结果。

编辑-要重叠，请使用position: relative和left值。

.parent_div {
  background: lightgreen;
  width: 1200px;
}

.child_div {
  height: 200px;
  display: flex;
  justify-content: center;
}

.item {
  width: 80px;
  height: 80px;
}

.item1 {
  background: orange;
}

.item2 {
  background: yellow;
}

.item3 {
  background: blue;
}

.item4 {
  background: red;
  position: relative;
  left: -20px;
}

<div class="parent_div">
  <div class="child_div">
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
    <div class="item item4"></div>
  </div>
</div>

Answer 2

您可以使用 select case when PARAMETER_VALUE = 'FALSE' THEN 'Y' else '' end as SMS_Send_Ind from Table_A where PARAMETER_Name = 'SMS_SEND' ; 和display:inline-block来做到这一点。

text-align: center

.parent_div {
  background: lightgreen;
  width: 1200px;
  text-align:center;
}

.child_div {
  height: 200px;
  display: inline-block;
}

.item {
  width: 80px;
  height: 80px;
  float: left;
}

.item1 {
  background: orange;
  left: 20%;
}

.item2 {
  background: yellow;
  left: 25%;
}

.item3 {
  background: blue;
  left: 30%;
}

.item4 {
  background: red;
  left: 35%;
}