Layer the circle(div) at the middle on the img pic

Question

I want to put the circle in the middle of picture or div id=canvas

but ,it doesn't appear on the map.

I gave the background-color then it appears..

but it's not in the middle of map.

.circle{
 width: 100px;
 height: 100px;
 border-radius: 50%;
    position: absolute;
    z-index: 3;
    background-color:blue
}

<div id="mainBoard" class="board" style="margin:100px 0px 0px 0px;position:relative; width:100%;height:100%;">
<div id="canvas" style="border-style:solid;border-color:red;">
<img style="position:relative;top 0;left 0; width:100%" 
 src="https://staticmapmaker.com/img/google@2x.png">
 <div class='circle' style='top:50%;left:50%;'></div>
</div>
</div>

duplicate of https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element https://stackoverflow.com/questions/2281087/center-a-div-in-css — doğukan, Feb 11 '20 at 09:29
@dgknca edited post by himself and changed TS originals and made it wrong — Aleksandr Belugin, Feb 11 '20 at 09:57
@dgknca please don't correct the OP code to make the question irrelevant ... now I can no more close as duplicate because I close as *no repo* — Temani Afif, Feb 11 '20 at 10:00
It was quite simple mistale background-color. but now it works, thank you and I am also confused. — whitebear, Feb 11 '20 at 10:02

score 1 · Answer 1 · edited Feb 11 '20 at 10:15

Add border or background so you can see.

Use transform: translate(-50%, -50%);

.circle{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        position: absolute;
        z-index: 3;
        background: red;
        transform: translate(-50%, -50%);
    }

.circle{
 width: 100px;
 height: 100px;
 border-radius: 50%;
    position: absolute;
    z-index: 3;
    background: red;
    transform: translate(-50%, -50%);
}

<div id="mainBoard" class="board" style="margin:50px 0px 0px 0px;position:relative; width:100%;height:100%;">
<div id="canvas" style="border-style:solid;border-color:red;">
<img style="position:relative;top 0;left 0; width:100%" 
 src="https://staticmapmaker.com/img/google@2x.png">
 <div class='circle' style='top:50%;left:50%;'></div>
</div>
</div>

score 1 · Answer 2 · answered Feb 11 '20 at 09:27

Use calc() to find position. The formulas are top:calc((100% - <object_height_value>)/2) and left:calc((100% - <object_width_value>)/2)

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  z-index: 3;
  background-color: blue;
  top: calc((100% - 100px)/2);
  left: calc((100% - 100px)/2);
}

<div id="mainBoard" class="board" style="margin:100px 0px 0px 0px;position:relative; width:100%;height:100%;">
  <div id="canvas" style="border-style:solid;border-color:red;">
    <img style="position:relative;top 0;left 0; width:100%" src="https://staticmapmaker.com/img/google@2x.png">
    <div class='circle'></div>
  </div>
</div>

score 1 · Accepted Answer · edited Feb 11 '20 at 09:59

1

You could simply use background-image.

.map {
  width: 200px;
  height: 200px;
  
  background-position: 50%;
  background-image:
    radial-gradient(circle, blue 10%, transparent 10%), 
    url(https://staticmapmaker.com/img/google@2x.png); 
}

<div class="map"></div>

edited Feb 11 '20 at 09:59

Temani Afif

245,468
26
309
415

answered Feb 11 '20 at 09:33

Roko C. Buljan

196,159
39
305
313

you can simplify the gradient to only `radial-gradient(circle, blue 10%, transparent 10%)` – Temani Afif Feb 11 '20 at 09:46
@TemaniAfif ups, exactly. thank you – Roko C. Buljan Feb 11 '20 at 09:48
1

I choose this way use background-image it is quite simple and nice for me. – whitebear Feb 11 '20 at 10:03

score -1 · Answer 4 · answered Feb 11 '20 at 09:26

Whats about this? Now you have the circle in the center.

#mainBoard {
  margin: 50px 0px 0px 0px;
  position: relative; 
  width: 100%;
  height: 100%;
}

#canvas {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 2px solid red;
}

.circle{
  width: 5%;
  height: 3%;
  border-radius: 50%;
  position: absolute;
  z-index: 3;
  background-color:blue
}

img {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
}

<div id="mainBoard" class="board">
 <div id="canvas">
  <img src="https://staticmapmaker.com/img/google@2x.png">
  <div class="circle"></div>
 </div>
</div>

Layer the circle(div) at the middle on the img pic

4 Answers4