Html 使用css将div中的多个元素居中

我不熟悉html和css，我正在尝试创建一个网站，部分代码如下：

HTML:

我试图将红色圆圈（水平和垂直）置于黑匣子的中心，但我似乎无法做到这一点。我尝试过使用“文本对齐”并将左右边距设置为“自动”，但这不起作用。我也不能使用“绝对”定位，因为我在页面顶部有一个固定的菜单栏，如果你滚动，它就会被破坏

---

任何帮助都将不胜感激。谢谢

我不认为只有CSS才能实现这一点，而不需要硬编码值

您可以使用flexbox（不太好的浏览器支持）或JavaScript解决方案

编辑：

我正在使用jQuery

对于三个圆圈：

var rowWidth = jQuery('.row').width();
var circleWidth = jQuery('.circle').width();
var equalSpace = rowWidth -  (3*circleWidth);
jQ('.row').css("padding-left", equalSpace + "px").css("padding-right", equalSpace + "px");

对于动态数量的圆：

var rowWidth = jQuery('.row').width();
var circleWidth = jQuery('.circle').width();
jQuery('.row').each(function(){
    var circNumber = jQuery(this).children('.row').length; //this will give you the number of circles inside the current row.
    var thisWidth = rowWidth - (circNumber * circleWidth);
    jQ(this).css('padding-left', thisWidth + "px").css('padding-right', thisWidth + "px")
})

---

我们遍历所有行，查看其中有多少个圆，然后将YR数乘以一个圆的宽度，这样我们就可以减去左/右填充。

使用flexbox，这是目前为止最好的选择，但是现在ie支持它，使用您提供的相同代码非常容易理解，您只需要给父元素一个文本对齐：居中和a位置：相对

    .row{
        border:4px solid black;
        height: 100px;
        width: 700px;
        margin: 10px;
        text-align:center;
        position:relative;
    }

然后设置子项边距：10px自动和显示：内联块

    .circle{
        border:4px solid red;
        height: 70px;
        width: 70px;
        border-radius: 40px;
       position:relative;
        margin:10px auto;
       display:inline-block;
    }

或者，如果您想在它们之间增加边距，请更改边距：10px自动至边缘：10px 40px

    .row{
        border:4px solid black;
        height: 100px;
        width: 700px;
        margin: 10px;
        text-align:center;
        position:relative;
    }

---

演示：

另一个带有display:table属性的简单解决方案：

HTML

---

用于水平对齐：使用

文本对齐：居中+
显示：内联块

用于垂直对齐：使用
行高
+
垂直对齐：中间


CSS
谢谢，你知道如何在javascript中实现这一点吗？为什么不使用70x70的图像而不是css来创建圆圈？@stackErr如果可以使用css，为什么要使用图像？
.circle
{
    border-style: solid;
    border-color: red;
    height: 70%;
    width: 70px;
    border-radius: 40px;
    display: inline-block;
    margin-left: 2px;
    margin-right: 2px;
    position: relative;
    top: 15%;
    -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}

.row
{
    border-style: solid;
    border-color: black;
    height: 100px;
    width: 700px;
    margin: 10px;
    text-align: center;

}

    .row{
        border:4px solid black;
        height: 100px;
        width: 700px;
        margin: 10px;
        text-align:center;
        position:relative;
    }

    .circle{
        border:4px solid red;
        height: 70px;
        width: 70px;
        border-radius: 40px;
       position:relative;
        margin:10px auto;
       display:inline-block;
    }

<div class="row">
    <div class="wrapper">
        <div class="circle"></div>
    </div>
</div>
<div class="row">
    <div class="wrapper">
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
</div>
<div class="row">
    <div class="wrapper">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
</div>
<div class="row">
    <div class="wrapper">
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
</div>
<div class="row">
    <div class="wrapper">
        <div class="circle"></div>
    </div>
</div>

.wrapper {
    display: table;
    margin: auto;
}

.circle
{
    border-style: solid;
    border-color: red;
    height: 70px;
    width: 70px;
    border-radius: 40px;
    margin: 2px;
    display:inline-block; /* for horizontal alignment */
    vertical-align: middle; /* for vertical alignment */
}

.row
{
    border-style: solid;
    border-color: black;
    height: 100px;
    line-height: 100px; /* for vertical alignment */
    width: 700px;
    margin: 10px;
    text-align: center; /* for horizontal alignment */
}