Home How to make a div to the center of a div that is in the center of another div?

Questions

How to make a div to the center of a div that is in the center of another div?

April 12, 2023

I’m looking to make an alternative WhatsApp sticker using HTML and CSS like the code below:

#square {
  width: 161.5px;
  height: 161.5px;
  background-color: rgba(17,27,33,0.1);
  border-radius: 30%;
  position: relative;
}

#circle {
  width: 50px;
  height: 50px;
  background-color: rgba(11,20,26,0.35);
  border-radius: 50%;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

#arrow {
  color: #ffffff;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

<div id="square">
  <div id="circle">
    <div id="arrow">
      <svg viewBox="0 0 24 24" height="24" width="24">
        <path d="M19.4725963,12.2 L15.1725963,12.2 L15.1725963,2.9 C15.1725963,2.4 14.7725963,2 14.2725963,2 L9.97259631,2 C9.47259631,2 9.07259631,2.4 9.07259631,2.9 L9.07259631,12.2 L4.77259631,12.2 C3.97259631,12.2 3.77259631,12.7 4.27259631,13.3 L11.0725963,20.6 C11.7725963,21.5 12.4725963,21.3 13.1725963,20.6 L19.9725963,13.3 C20.4725963,12.7 20.2725963,12.2 19.4725963,12.2 Z" fill="currentColor"></path>
      </svg>
    </div>
  </div>
</div>

Previously I managed to make the circle centered on the square by making position: relative on #square and position: absolute on #circle. But I’m having trouble getting the arrow position to be in the center of the circle because the circle already has an absolute position.

How am I able to place the arrow in the center of the circle (where it is in the center of the square)? Thanks.

>Solution :

Add the following CSS:

#arrow {
  display: flex;
  justify-content: center;
  align-items: center;
}

See the snippet below.

#square {
  width: 161.5px;
  height: 161.5px;
  background-color: rgba(17,27,33,0.1);
  border-radius: 30%;
  position: relative;
}

#circle {
  width: 50px;
  height: 50px;
  background-color: rgba(11,20,26,0.35);
  border-radius: 50%;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

#arrow {
  color: #ffffff;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="square">
  <div id="circle">
    <div id="arrow">
      <svg viewBox="0 0 24 24" height="24" width="24">
        <path d="M19.4725963,12.2 L15.1725963,12.2 L15.1725963,2.9 C15.1725963,2.4 14.7725963,2 14.2725963,2 L9.97259631,2 C9.47259631,2 9.07259631,2.4 9.07259631,2.9 L9.07259631,12.2 L4.77259631,12.2 C3.97259631,12.2 3.77259631,12.7 4.27259631,13.3 L11.0725963,20.6 C11.7725963,21.5 12.4725963,21.3 13.1725963,20.6 L19.9725963,13.3 C20.4725963,12.7 20.2725963,12.2 19.4725963,12.2 Z" fill="currentColor"></path>
      </svg>
    </div>
  </div>
</div>