Question

我正在寻找第二个包装div，它将包含三个彼此等距的正方形，大约200px x 200px。问题是它们没有朝向div的中间对齐，并且每当调整窗口大小时，方块在网站上保持静态位置。无论窗户的大小，我都希望他们能够居中。

请查看我的代码：

/*Comment example - created 10/12/16*/

* {
  font-family: 'Libre Franklin', sans-serif;
  background-color: rgb(255, 255, 255);
}
.wrapper {
  /*black*/
  width: 960px;
  min-height: 700px;
  margin: 0 auto;
}
.main_content {
  width: 730px;
  min-height: inherit;
  text-align: center;
  float: left;
}
.wrapperTwo {
  width: 100%;
  height: 300px;
  background-color: rgba(99, 99, 99, 0.7);
  align: center;
}
#squareOne {
  width: 200px;
  height: 200px;
  background-color: rgba(99, 99, 99, 0.7);
  border: 1px solid rgb(223, 223, 223);
  position: relative;
  top: 50px;
  left: 150px;
}
#squareTwo {
  width: 200px;
  height: 200px;
  background-color: rgba(99, 99, 99, 0.7);
  border: 1px solid rgb(223, 223, 223);
  position: relative;
  top: -155px;
  left: 550px;
}
#squareThree {
  width: 200px;
  height: 200px;
  background-color: rgba(99, 99, 99, 0.7);
  border: 1px solid rgb(223, 223, 223);
  position: relative;
  top: -355px;
  left: 960px;
}
.wrapperThree {
  width: 100%;
  height: 500px;
}
h2 {
  position: relative;
  left: 5px;
}
h5 {
  position: relative;
  left: 5px;
}
p {
  position: relative;
  left: 5px;
}

<div class=banner></div>
<div class="wrapper">
  <div class="main_content">
    <h2></h2>
    <!-- END OF H2 -->
    <h5> Inc. has been a  standard of web-based and cloud-based server systems since 2007.</h5> 
    <!-- END OF H5 -->
    <p>
      Our clients have trusted our team for almost a decade and throughout the years we have proven our worth over and over again.
    </p>
    <!-- END OF P -->
  </div>
  <!-- END OF MAIN_CONTENT -->

</div>
<!-- END OF wrapper -->

<div class="wrapperTwo">
  <div id="squareOne"></div>
  <div id="squareTwo"></div>
  <div id="squareThree"></div>
</div>
<!-- END OF wrapperTwo-->

<div class="wrapperThree"></div>

Answer 1

尝试使用更好的方法将元素对齐到中心。一个流行的例子是position:absolute; left:50%;top:50%; transform:translate(-50%,-50%);。

这样元素就会从容器的中间开始定位，并将自己的尺寸偏移50％。

如何让包装div中的div保持居中？

1 个答案: