Html 缩放窗口时，父div未与中心对齐

每当我将窗口重新缩放/调整到更小的大小（智能手机大小）时，彼此下方的三个内部分区（.left.center.right）分别为红色、绿色和蓝色，它们都不会与中心对齐。请参阅所附的屏幕截图以了解。我希望所有这三个div都位于main.container div（粉红色）的中心，只要窗口缩小。非常感谢您的意见

html，正文{
宽度：100%；
左：0px；
顶部：0px；
边际：0px；
身高：100%；
}
.集装箱{
宽度：自动；
左：0px；
顶部：0px；
浮动：无；
宽度：自动；
最大宽度：自动；
位置：相对位置；
背景色：rgba（216,86,112,0.5）；
身高：100%；
页边顶部：自动；
保证金权利：5%；
左缘：5%；
显示：块；
右：0px；
}
.顶{
宽度：100%；
左：0px；
顶部：0px；
背景色：rgba（204,51,0,1）；
身高：10%；
位置：相对位置；
边际：0px；
文本对齐：居中；
}
.左{
浮动：左；
高度：自动；
宽度：331px；
背景色：rgba（255,0,0,1）；
左边距：自动；
右边距：自动；
位置：相对位置；
左：自动；
顶部：0px；
}
.中心{
浮动：左；
高度：自动；
宽度：331px；
背景色：rgba（0,255,0,1）；
左边距：0px；
右边距：自动；
位置：相对位置；
左：0px；
}
.对{
浮动：左；
高度：自动；
宽度：331px；
背景色：rgba（0,0,255,1）；
左边距：0px；
右边距：自动；
位置：相对位置；
左：0px；
顶部：0px；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。不要把车停在那里。这是我的名字。南欧鲁图姆乌纳。Donec mattis是一个自由的faucibus euismod。猪瘟悬液。
Lorem ipsum dolor sit amet，是一位杰出的献身者。不要把车停在那里。这是我的名字。南欧鲁图姆乌纳。Donec mattis是一个自由的faucibus euismod。猪瘟悬液。
Lorem ipsum dolor sit amet，是一位杰出的献身者。不要把车停在那里。这是我的名字。南欧鲁图姆乌纳。Donec mattis是一个自由的faucibus euismod。猪瘟悬液。

我的方法是为css编写单独的代码，在满足条件时覆盖代码。为此，您可以在更改和添加代码之前决定最大宽度：

 @media only screen and (max-width: 1187px)
        {
            new css here
        }

对于您的特定项目，您只需更改浮动和边距（以及所需的宽度（此处为1187）），以便：

---

我的方法是使用单独的css代码，在满足条件时覆盖代码。为此，您可以在更改和添加代码之前决定最大宽度：

 @media only screen and (max-width: 1187px)
        {
            new css here
        }

对于您的特定项目，您只需更改浮动和边距（以及所需的宽度（此处为1187）），以便：

---

UPD位于父对象中心的三个块

我已经看到了三个块的坐标，<它们的中心像

-

。这是我的解决方案

html，正文{
边际：0px；
身高：100%；
}
.集装箱{
背景色：rgba（216,86,112,0.5）；
身高：100%；
利润率：0.5%；
文本对齐：居中；
}
.顶{
宽度：100%；
背景色：rgba（204,51,0,1）；
身高：10%；
}
左边
居中
.对{
显示：内联块；
宽度：331px；
}
.left{背景色：rgba（255,0,0,1）；}
.center{背景色：rgba（0，255，0，1）；}
.right{背景色：rgba（0,0,255,1）；}

Lorem ipsum dolor sit amet，是一位杰出的献身者。不要把车停在那里。这是我的名字。南欧鲁图姆乌纳。Donec mattis是一个自由的faucibus euismod。猪瘟悬液。
Lorem ipsum dolor sit amet，是一位杰出的献身者。不要把车停在那里。这是我的名字。南欧鲁图姆乌纳。Donec mattis是一个自由的faucibus euismod。猪瘟悬液。
Lorem ipsum dolor sit amet，是一位杰出的献身者。不要把车停在那里。这是我的名字。南欧鲁图姆乌纳。Donec mattis是一个自由的faucibus euismod。猪瘟悬液。

UPD位于父对象中心的三个块

我已经看到了三个块的坐标，<它们的中心像

-

。这是我的解决方案

html，正文{
边际：0px；
身高：100%；
}
.集装箱{
背景色：rgba（216,86,112,0.5）；
身高：100%；
利润率：0.5%；
文本对齐：居中；
}
.顶{
宽度：100%；
背景色：rgba（204,51,0,1）；
身高：10%；
}
左边
居中
.对{
显示：内联块；
宽度：331px；
}
.left{背景色：rgba（255,0,0,1）；}
.center{背景色：rgba（0，255，0，1）；}
.right{背景色：rgba（0,0,255,1）；}

Lorem ipsum dolor sit amet，是一位杰出的献身者。不要把车停在那里。这是我的名字。南欧鲁图姆乌纳。Donec mattis是一个自由的faucibus euismod。猪瘟悬液。
Lorem ipsum dolor sit amet，是一位杰出的献身者。不要把车停在那里。这是我的名字。南欧鲁图姆乌纳。Donec mattis是一个自由的faucibus euismod。猪瘟悬液。
Lorem ipsum dolor sit amet，是一位杰出的献身者。不要把车停在那里。这是我的名字。南欧鲁图姆乌纳。Donec mattis是一个自由的faucibus euismod。猪瘟悬液。

这就是你想要的吗

刚刚删除了浮动和左位置样式

<div class="container">
  <div class="top"></div>

  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>

  <div class="center">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>

  <div class="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>
</div>

html,body {
  width: 100%;
  left: 0px;
  top: 0px;
  margin: 0px;
  height: 100%;
}
.container {
  width: auto;
  left: 0px;
  top: 0px;
  float: none;
  width: auto;
  max-width: auto;
  position: relative;
  background-color: rgba(216, 86, 112, 0.5);
  height: 100%;
  margin-top: auto;
  margin-right: 5%;
  margin-left: 5%;
  display: block;
  right: 0px;

}
.top {
  width: 100%;
  left: 0px;
  top: 0px;
  background-color: rgba(204, 51, 0, 1);
  height: 10%;
  position: relative;
  margin: 0px;
  text-align: center;
}
.left {
  height: auto;
  width: 331px;
  background-color: rgba(255, 0, 0, 1);
  margin-left: auto;
  margin-right: auto;
  position: relative;

}
.center {

  width: 331px;
  background-color: rgba(0, 255, 0, 1);
  margin-left: auto;
  margin-right: auto;
  position: relative;

}
.right {

  height: auto;
  width: 331px;
  background-color: rgba(0, 0, 255, 1);
  margin-left: auto;
  margin-right: auto;
  position: relative;

}

Lorem ipsum dolor sit amet，是一位杰出的献身者。不要把车停在那里。这是我的名字。南欧鲁图姆乌纳。多尼克·马蒂斯是个自由人
<div class="container">
  <div class="top"></div>
  <div>
  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>

  <div class="center">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>

  <div class="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>
  </div>
</div>

html,body {
  width: 100%;
  left: 0px;
  top: 0px;
  margin: 0px;
  height: 100%;
}
.container {
  width: auto;
  left: 0px;
  top: 0px;
  float: none;
  width: auto;
  max-width: auto;
  position: relative;
  background-color: rgba(216, 86, 112, 0.5);
  height: 100%;
  margin-top: auto;
  margin-right: 5%;
  margin-left: 5%;
  display: block;
  right: 0px;

}
.top {
  width: 100%;
  left: 0px;
  top: 0px;
  background-color: rgba(204, 51, 0, 1);
  height: 10%;
  position: relative;
  margin: 0px;
  text-align: center;
}
.left {
  height: auto;
  width: 33%;
  background-color: rgba(255, 0, 0, 1);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  float:left;

}
.center {

  width: 33%;
  background-color: rgba(0, 255, 0, 1);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  float:left;

}
.right {

  height: auto;
  width: 34%;
  background-color: rgba(0, 0, 255, 1);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  float:left;

}