Javascript 在父div中居中放置多个div

我有一些div，我想在水平行中居中。我已经尝试了我能想到的一切，并且研究了它，但没有结果。这是我的密码

HTML:

---

如有任何见解，将不胜感激。谢谢。

快到了，您必须使用文本对齐：居中因为.panel是内联文本或跨距

#panel-row {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

---

解决方案1:（推荐）

使用flexbox

使用flexbox很容易实现这一点，您需要做的是设置

display:flex和
调整内容：中心

代码片段：


正文{
字体系列：“HelveticaNeue灯”，“Helvetica Neue灯”，“Helvetica Neue”，Helvetica，Arial，“Lucida Grande”，无衬线；
字体大小：300；
边际：0px；
}
html{
宽度：100%；
身高：100%；
边际：0px；
}
#包装纸{
宽度：100%；
身高：100%；
}
#盒子{
背景色：#EEE；
宽度：100%；
高度：250px；
左边距：自动；
右边距：自动；
文本对齐：居中；
}
#头{
填充顶部：25px；
字号：20pt；
}
#btn面板{
宽度：100%；
高度：100px；
边缘顶部：50px；
}
.btn{
宽度：100px；
高度：50px；
边界半径：5px；
右边距：20px；
}
#面板行{
显示器：flex；
证明内容：中心；
高度：150像素；
边缘顶部：20px；
左边距：自动；
右边距：自动；
}
.小组{
显示：内联块；
右边距：25px；
宽度：100px；
高度：100px；
边界半径：10px；
边框：1px纯色灰色；
背景色：#7FFFD4；
}
菲德先生{
边缘顶部：10px；
边缘底部：10px；
左边距：20px；
}

你好，世界
小组1
小组2
小组3
小组4
面板#1


面板2


面板3


面板4



您可以使用
面板行上的
文本对齐：居中


正文{
字体系列：“HelveticaNeue灯”，“Helvetica Neue灯”，“Helvetica Neue”，Helvetica，Arial，“Lucida Grande”，无衬线；
字体大小：300；
边际：0px；
}
html{
宽度：100%；
身高：100%；
边际：0px；
}
#包装纸{
宽度：100%；
身高：100%；
}
#框{
背景色：#EEE；
宽度：100%；
高度：250px；
左边距：自动；
右边距：自动；
文本对齐：居中；
}
#头{
填充顶部：25px；
字号：20pt；
}
#btn面板{
宽度：100%；
高度：100px；
边缘顶部：50px；
}
.btn{
宽度：100px；
高度：50px；
边界半径：5px；
右边距：20px；
}
#面板行{
宽度：100%；
高度：150像素；
边缘顶部：20px；
左边距：自动；
右边距：自动；
文本对齐：居中；/*对齐面板行内的文本*/
}
.小组{
显示：内联块；
右边距：25px；
宽度：100px；
高度：100px；
边界半径：10px；
边框：1px纯色灰色；
背景色：#7FFFD4；
}
菲德先生{
边缘顶部：10px；
边缘底部：10px；
/*左边距：20px*/*此边距与居中文本对齐方式混乱*/
}
#面板行{
右边距：自动；
左边距：自动；
}

你好，世界！
你好，世界
小组1
小组2
小组3
小组4
面板1
面板2
面板3
面板4
Dylan，你在找这样的东西吗-
    body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300; 
   margin: 0px;
}

html {
    width: 100%;
    height: 100%;
    margin: 0px;
}

#wrapper {
    width: 100%;
    height: 100%;
}

#box { 
    background-color: #EEE;
    Width: 100%;
    Height: 250px;
    margin-left: auto;
    margin-right: auto;
    Text-align: center; 
}

#head {
    padding-top: 25px;
    font-size: 20pt;
}
#btn-panel {
    width: 100%;
    height: 100px;
    margin-top: 50px;
}

.btn {
    width: 100px;
    height: 50px;
    border-radius: 5px;
    margin-right: 20px;
}

#panel-row {
    width: 100%;
    height: 150px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

.panel {
    display: inline-block;
    margin-right: 25px;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    border: 1px solid gray;
    background-color: #7FFFD4;
}
.phead {
    margin-top: 10px; 
    margin-bottom: 10px; 
    margin-left: 20px; 
}

#panel-row {
    margin-right: auto; 
    margin-left: auto;  
}

#panel-row {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#panel-row, .panel, .phead {
  text-align:center;
}