我无法将div居中

Question

enter image description here i am trying to center the div over the image , i tried positioning the container relative and the elements to absolute but didn't work.The code below shows what i have done till now.The image is a full size background and the container should be centered over it.

 .circle123{ position: relative; float: none; width: 600px; height: 200px; top: 0; margin-right:auto; margin-left:auto; text-align: center; border: 1px solid black; } #circle1{ position: absolute; display: inline-block; height: 150px; width: 150px; margin: 10px; padding: auto; border-radius: 50%; background-color: rgba(50,205,50, 0.75); } #circle2{ position: absolute; display: inline-block; height: 150px; width: 150px; margin: 10px; padding: auto; border-radius: 50%; background-color:rgba(135,206,235, 0.75); } #circle3{ position:absolute ; display: inline-block; height: 150px; width: 150px; margin: 10px; padding: auto; border-radius: 50%; background-color: rgba(220,20,60, 0.55); } .back-bar{ display: inline-block; width: 100%; height: 100%; background: url(image.jpg); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: center center; } 

 <div class="back-bar"></div> <div class="circle123"> <div id="circle1"><h2>1<h2></div> <div id="circle2"><h2>2<h2></div> <div id="circle3"><h2>3<h2></div> </div> </div> 

Answer 1

First, there is problem in your html code, the last </div> close nothing. To center a container with position : absolute , the container who has the element should be on position : relative . And after that you can center your element with position : absolute with :

`position : absolute;
top : 0;
bottom : 0;
left : 0;
right : 0;
margin: auto;`

Answer 2

Your HTML has issues, <h2> are not closed and you have an extra </div> at the bottom.

To center each circle in the container, add this to each circle:

  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;

Here is jsfiddle: https://jsfiddle.net/jLodgoc7/

Answer 3

I can't understand what you want, but I believe you want to center content horizontally and vertically on a div that has an image as background. So, here you have.

 .image { width: 300px; height: 300px; position: relative; background: url('https://placehold.it/300x300/?text=This is your image'); } .image > .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

 <div class="image"> <div class="centered">This is at center</div> </div> 

Answer 4

First step: remove 'Position' from css .

Second step: add float:right for cricle1 and added float:left to cricle3 .

finally add this style(div h { }) on css:

#circle1{
    display: inline-block;
    height: 150px;
    width: 150px;
    margin: 10px;
    padding: auto;
    border-radius: 50%;
    background-color: rgba(50,205,50, 0.75);
    float: right;
}
#circle2{
    display: inline-block;
    height: 150px;
    width: 150px;
    margin: 10px;
    padding: auto;
    border-radius: 50%;
    background-color:rgba(135,206,235, 0.75);
    float: none;
}
#circle3{
    display: inline-block;
    height: 150px;
    width: 150px;
    margin: 10px;
    padding: auto;
    border-radius: 50%;
    background-color: rgba(220,20,60, 0.55);
    float: left;
}

div h { 
        text-align: center;
        vertical-align: middle;
}