Html 在容器div内水平居中div

我有多个设定宽度的div，我希望在容器div内居中。子div的数量可能会有所不同，因此无论父div中有多少个div，我都需要它们居中。注意：容器div必须具有

位置：绝对

<div class="wrapper">
  <div class="f" ></div>
  <div class="f" ></div>
  <div class="f"></div><div class="f">
  </div><div class="f"></div>
</div>

jsfiddle很简单，可以添加这个css


移除浮动并在子对象上设置
display:inline block
，然后移除容器的高度，使其根据需要自动展开

CSS

你为什么有虚无？你问的其他部门在哪里？编辑问题以澄清问题
.wrapper {
    position: absolute;
    width: 80%;
    top: 0;
    left: 0;
    text-align: center;
    margin: 0px auto;
    border: 0.2rem solid black;
    height: 0.8rem;
}

.f {
    -webkit-box-shadow: inset 0.2rem 0 0 white;
    box-shadow: inset 0.2rem 0 0 white;
    background-color: red;
    width: 35px;
    height: 0.8rem;
    position: relative;
    float: left;
}

    .wrapper {
position: absolute;
width: 80%;
top: 0;
left: 0;
text-align: center;
margin: 0px auto;
border: 0.2rem solid black;
height: 0.8rem;
    left:50%;
    margin-left: -40%; /*width/2*/
}

.wrapper {
    position: absolute;
    width: 80%;
    top: 0;
    left: 0;
    text-align: center;
    margin: 0px auto;
    border: 0.2rem solid black;
}
.f {
    -webkit-box-shadow: inset 0.2rem 0 0 white;
    box-shadow: inset 0.2rem 0 0 white;
    background-color: red;
    width: 35px;
}
i {
    font-size: 0;
    height: 0.8rem;
    position: relative;
    display:inline-block;
}