Css 如何在div中居中放置元素？

我在一个主分区中有一些分区，但我已经查看了所有类似于此的问题，我尝试了许多方法，但我无法将它们水平居中。我只能把它们放在另一边，但不能放在中间

.ground {
  width: 390px;
  height: 575px;
  border: 1px solid white;
}

.line {
  padding: 10px
}

.active {
  width: 30px;
  height: 30px;
  opacity: 0.5;
  background: gray;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
  border-radius: 100px;  
  display: inline-block;
  border: 2px solid black;
}

.nonactive {
  width: 30px;
  height: 30px;
  opacity: 1.0;
  background: lime;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
  border-radius: 100px;  
  display: inline-block;
  border: 2px solid black;
}

这是你的电话号码

---

你可以看到这5个圆圈是我需要的，它们在主div地面内居中

您可以使用flexbox定心<父元素上的code>display:flex和

justify content:center

将使圆圈居中

.ground{
宽度：390px；
身高：575px；
背景图片：url（数据：image/jpeg；base64/9j/4AAQSkZJRgABAQEAxgDGAAD/2wbdaaaibaqibaqibaqibaqicagicawdawmdawyebamfbwwwwwwwwwcbcg0kcgmdawwwkodw0mdgsmdaz/2wbdaaqicagydawydaydawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdawmdaw2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2NZG5OKNeruzhselku1rvvldywvpjzgvmz2hpann0dxz3ehl6gooehyaimkppoulzaxmaokpaanqkmqsro0tba3ulm6wspexchymnk0tpu1dbx2nna4upk5ebn6onq8vp09fb3+Pn6/9oadabairaxeapwd49bqcd1/CgT7RjA4+lEZ4b2A/lTa/Dj86Z//）；
边框：1px纯白；
显示器：flex；
证明内容：中心；
}
.线路{
填充：10px
}
.主动{
宽度：30px；
高度：30px；
不透明度：0.5；
背景：灰色；
-moz边界半径：60px；
-webkit边界半径：60px；
边界半径：100px；
显示：内联块；
边框：2件纯黑；
}
.不活跃{
宽度：30px；
高度：30px；
不透明度：1.0；
背景：石灰；
-moz边界半径：60px；
-webkit边界半径：60px；
边界半径：100px；
显示：内联块；
边框：2件纯黑；
}

---

在您的情况下，最简单的方法是将

行

元素的

显示

设置为

内联块

，使其具有一个。这样做时，它将与其子元素具有相同的宽度。然后将

文本对齐：居中

添加到父元素以使内联子元素居中：

---

请参阅以获得一些备选方案。

为什么不将

文本对齐：居中；

添加到.line？我只是想问一个问题：）@saehunchenoh这肯定有效，但我认为最好将父对象居中，以防其上有背景/边框或其他内容。例如，vs很好，但这很有效。。在寻找这个问题时，我从来没有遇到过你链接的另一条线索。@JoshCrozier啊，我只想到了一个直接的答案，而不是想到其他情况。谢谢：）

.ground {
  text-align: center;
}
.ground .line {
  display: inline-block;
}