How to center elements inside a div? [duplicate] - css

Question

This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 7 years ago.
I have some divs inside a main div, but I have looked every questions similar to this and I have tried many things but I couldn't center them horizontally. I could only make them on the other side but not the center.
.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;
}
Here is the jsfiddle demo
You can see those 5 circles are the ones I need to center them inside the main div ground.

Answer 1

In your case, the simplest way to do this would be to set the display of the .line element to inline-block so that it has a "shrink-to-fit" width. In doing so, it will have the same width as its children elements. Then add text-align: center to the parent element to center the inline child element:
Updated Example
.ground {
text-align: center;
}
.ground .line {
display: inline-block;
}
See this answer for a few alternatives.

Answer 2

You can make use of flexbox centering. display: flex and justify-content: center on the parent element will center the circles.
JSfiddle Demo
.ground {
width: 390px;
height: 575px;
background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAxgDGAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAKAAoDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD49bqCD1/CgT7RjA4+lEZ4b2A/lTa/Dj86Z//Z);
border: 1px solid white;
display: flex;
justify-content: center;
}
.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;
}
<div class="ground">
<div class="line">
<div id="def" class="active"></div>
<div id="def" class="active"></div>
<div id="def" class="active"></div>
<div id="def" class="active"></div>
<div id="def" class="active"></div>
</div>
</div>