html - 如何在 div 中居中多个 div

Question

这就是我正在尝试做的在此处输入图像描述 但我无法对齐容器中心的项目。我试过margin: auto了，但它似乎不起作用。

.containerfour {
  display: inline-block;
  margin: auto;
  
}

.configmini{
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.configmini2{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}
.configone {
  margin-top: 100px;
  font-weight: bold 900;
  font: bold 55px/58px Nunito Sans;
  letter-spacing: 0px;
  color: #404041;
  text-transform: uppercase;
  opacity: 1;

}
.configoneS {

  width: 100px;
  height: 22px;
  color: var(--unnamed-color-ff6f3d);
  text-shadow: 0px 0px 20px var(---fbf9f4);
  text-align: center;
  font: normal normal bold 16px/73px Nunito Sans;
  letter-spacing: 0px;
  color: #ff6f3d;
  text-shadow: 0px 0px 20px #fbf9f4;
  opacity: 1;
}

.configoneH {

  margin-top: 20px;
  width: 400px;
  height: 138px;
  color: var(--unnamed-color-404041);
  text-align: center;
  font: normal normal normal 35px/40px Nunito Sans Black;
  letter-spacing: 0px;
  color: #404041;
  text-transform: uppe;
}

.buttonconfo {
 
  margin-top: 5px;
  text-align: center;
  font: normal normal normal 10px/30px Nunito Sans Black;
  letter-spacing: 0px;
  color: #ffffff;
  text-transform: uppercase;
  opacity: 1;
  background: var(--unnamed-color-ff6f3d) 0% 0% no-repeat padding-box;
  background: #ff6f3d 0% 0% no-repeat padding-box;
  border-radius: 7px;
  opacity: 1;
}
.buttonconfo :hover {
  cursor: pointer;
  color: #404042;
}

      <div class="containerfour">
        <div class="configmini"></div>
          <img class="configone" src="img/config_1.svg">
          <p class="configoneS">Sustainability</p>
          <h2 class="configoneH">How much can your country save with refour?</h2>
          <button  class="buttonconfo">Read more</button>
        </div>
                <div class="image">
          <div class="configmini2">
            <img class="configone" src="img/config_2.svg">
            <p class="configoneS">Material</p>
            <h2 class="configoneH">How much can your country save with refour?</h2>
            <button  class="buttonconfo">Read more</button>
          </div>
        </div>
      </div>
      

标签： htmlcss

Answer 1

您可以使用 flexbox 并更改为：

.containerfour,
.configmini2 {
  /* display: inline-block; */
  /* margin: auto; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

我已经将这两个元素都包裹在wrapper

<div class="wrapper">
...
</div>

.wrapper {
  display: flex;
  align-items: center;
}

.wrapper>* {
  flex: 1;
}

.containerfour,
.configmini2 {
  /* display: inline-block; */
  /* margin: auto; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.configmini {
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.configmini2 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.configone {
  margin-top: 100px;
  font-weight: bold 900;
  font: bold 55px/58px Nunito Sans;
  letter-spacing: 0px;
  color: #404041;
  text-transform: uppercase;
  opacity: 1;
}

.configoneS {
  width: 100px;
  height: 22px;
  color: var(--unnamed-color-ff6f3d);
  text-shadow: 0px 0px 20px var(---fbf9f4);
  text-align: center;
  font: normal normal bold 16px/73px Nunito Sans;
  letter-spacing: 0px;
  color: #ff6f3d;
  text-shadow: 0px 0px 20px #fbf9f4;
  opacity: 1;
}

.configoneH {
  margin-top: 20px;
  width: 400px;
  height: 138px;
  color: var(--unnamed-color-404041);
  text-align: center;
  font: normal normal normal 35px/40px Nunito Sans Black;
  letter-spacing: 0px;
  color: #404041;
  text-transform: uppe;
}

.buttonconfo {
  margin-top: 5px;
  text-align: center;
  font: normal normal normal 10px/30px Nunito Sans Black;
  letter-spacing: 0px;
  color: #ffffff;
  text-transform: uppercase;
  opacity: 1;
  background: var(--unnamed-color-ff6f3d) 0% 0% no-repeat padding-box;
  background: #ff6f3d 0% 0% no-repeat padding-box;
  border-radius: 7px;
  opacity: 1;
}

.buttonconfo :hover {
  cursor: pointer;
  color: #404042;
}

<div class="wrapper">
  <div class="containerfour">
    <div class="configmini"></div>
    <img class="configone" src="img/config_1.svg">
    <p class="configoneS">Sustainability</p>
    <h2 class="configoneH">How much can your country save with refour?</h2>
    <button class="buttonconfo">Read more</button>
  </div>
  <div class="image">
    <div class="configmini2">
      <img class="configone" src="img/config_2.svg">
      <p class="configoneS">Material</p>
      <h2 class="configoneH">How much can your country save with refour?</h2>
      <button class="buttonconfo">Read more</button>
    </div>
  </div>
</div>
</div>