Html 我怎样才能将另一个分区中的分区居中？

我的内部div有以下CSS：

.square3 {
  border:solid 1px #008CBA;
  background-color:white;
  position: relative;
  width: 100%;
  max-width:500px;
  box-sizing: border-box;
  display: inline-block;
  float:left;
}

.square3:after {
  content: "";
  display: inline-block;
  padding-bottom: 100%;
  box-sizing: border-box;
}

.monthInfo{
  position: relative;
  width: 100%;
  max-width:100%;
  box-sizing: border-box;
  display: inline-block;
  float:left;
  content: "";
  display: inline-block;
  box-sizing: border-box;
  z-index:1000;
}

我的外部div有以下CSS：

.square3 {
  border:solid 1px #008CBA;
  background-color:white;
  position: relative;
  width: 100%;
  max-width:500px;
  box-sizing: border-box;
  display: inline-block;
  float:left;
}

.square3:after {
  content: "";
  display: inline-block;
  padding-bottom: 100%;
  box-sizing: border-box;
}

.monthInfo{
  position: relative;
  width: 100%;
  max-width:100%;
  box-sizing: border-box;
  display: inline-block;
  float:left;
  content: "";
  display: inline-block;
  box-sizing: border-box;
  z-index:1000;
}

---

我试着让我的外部文本对齐：居中，内部边距：0自动，但这不起作用。内部div一直位于页面的左侧。我希望它保持在中间。

text align:center

如果从子对象中删除

float:left

，则父对象上的文本对齐：中间将起作用

.square3{
边框：实心1px#008CBA；
背景色：白色；
位置：相对位置；
宽度：100%；
最大宽度：500px；
框大小：边框框；
显示：内联块；
}
.3:之后{
内容：“；
显示：内联块；
垫底：100%；
框大小：边框框；
}
蒙钦福先生{
位置：相对位置；
宽度：100%；
最大宽度：100%；
框大小：边框框；
显示：内联块；
浮动：左；
内容：“；
显示：内联块；
框大小：边框框；
z指数：1000；
边框：1px纯红；
文本对齐：居中；
}

---

btw，使用

float

使元素

display:block

因此，如果元素上有

float

，

display:inline block

将不起任何作用，并且是不必要的。