Html 如何水平居中？

我在一个网页上有两个div。一个向左浮动，一个向右浮动。我希望它们都总是水平居中，以便这些div内的所有东西总是在页面的中间。

CSS:

---

我希望两个div始终水平居中。我尝试了页边距顶部：50%，页边距底部：50%，但不起作用。

尝试使用

text align:center

。如果在包含#appinfodiv和#appImgDiv的div上使用它，则应该能够使div居中，而不必浮动它们

另外，不要让容器漂浮在水面上

display:inline-block
vertical-align:top;

---

您可能需要稍微减小宽度以使其保持在同一条线上。

您是指这样的吗`

<div class="body">
  <div class="inner">
    <div id="appInfoDiv">First Div</div>
    <div id="appImgDiv">Second Div</div>
  </div>    
</div>

---

和提琴：

如果您使用了上下边距。。。您的意思是在页面或浏览器窗口内垂直居中吗？您可以使用“左”和“右”来管理水平位置。

<div class="body">
  <div class="inner">
    <div id="appInfoDiv">First Div</div>
    <div id="appImgDiv">Second Div</div>
  </div>    
</div>

.body {
display:block;
position:relative;
width:300px;
height:200px;
border:1px solid red;
}
.inner {
position:absolute;
left:50%;
margin-left:-60px;
top:50%;
margin-top:-25px;
width:120px;
height:50px;
background:green;
max-width:1400px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
padding: 4px 0;
}
#appInfoDiv{
float: left;
width: 60%;
height:40px;
background-color: black;
}
#appImgDiv{
float: left;
width: 40%;
height:40px;
background-color: red;
}