Question

我有一套3个促销盒

.promo-boxes .promo-box {
    width: 49.5% !important;
    margin-right: 0.3% !important;
    margin-top: 1% !important;
    position: relative !important;
    float: none !important;
}

.promo-boxes .promo-box.second,
.promo-boxes .promo-box.last {
    margin-right: 0 !important;
}

所以你可以看到我尝试使用position和float以及其他文本左边等没有成功。

我希望这些能够在我失踪的任何地方居中？

Answer 1

尝试这样的事情：

div {
    width: 100px;
    height: 100px;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}

Answer 2

尝试：

.promo-boxes .promo-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

您可能需要定义宽度，除非您希望它与其内容一样大。此外，除非您别无选择，否则请勿使用!important！

Answer 3

你可以使用flexbox解决这个问题。

.promo-boxes {
  width: 100%;
  display: flex;
  justify-content: space-around;
  background-color:white;
  margin-top: 20px;
  border: solid 1px #ccc;
}
.spacebetween {
 justify-content: space-between;

}
.promo-box {
    width: 100px;
    height: 50px;
    border: solid 1px #ccc;
    background-color:red;
}

<div class="promo-boxes">
  <div class="promo-box">
  promo box
  </div>
  <div class="promo-box">
  promo box
  </div>
  <div class="promo-box">
  promo box
  </div>
</div>

<div class="promo-boxes spacebetween">
  <div class="promo-box">
  promo box
  </div>
  <div class="promo-box">
  promo box
  </div>
  <div class="promo-box">
  promo box
  </div>
</div>

CSS促销盒中心定位

3 个答案: