Place circular div at the center of container for all device

Question

My requirement is like this:
A circular div surrounded by other 4 divs. I tried in this way :

.circle {
            z-index: 10;
            position: absolute;
            width: 13em;
            height: 13em;
            border-radius: 50%;
            background: lightblue;
            top: 60px; 
            right: 40%;
        }

        .corners {
            background: #eee;
            color: #333;
            position: relative;
            overflow: hidden;
        }

        .text {
            border: 1px solid #ccc;
            padding: 8px 20px 8px;
            
            height: 150px;
        }

        .arc-bottom-l,
        .arc-bottom-r,
        .arc-top-l,
        .arc-top-r {
            position: absolute;
            background: #fff;
            width: 210px;
            height: 210px;
            border-radius: 50%;
            border: 1px solid #ccc;
        }

        .arc-bottom-l {
            bottom: -100px;
            left: -100px;
        }

        .arc-bottom-r {
            bottom: -100px;
            right: -100px;
        }

        .arc-top-l {
            top: -100px;
            left: -100px;
        }

        .arc-top-r {
            top: -100px;
            right: -100px;
        }

But i couldn't make it for all devices. How to make this thing for all devices and position the middle div accordingly? What i tried, Adding space in between the divs and make the circular div at the center of the container but when i resize the window it get distorted.

user_8157693 · Answer

You were very close.

On .circle use:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

and on .container use:

position: relative

To make sure the circle stays in the middle regardless of screen size.

Working example:

.container {
  position: relative
}

.circle {
  z-index: 10;
  width: 13em;
  height: 13em;
  border-radius: 50%;
  background: lightblue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.corners {
  background: #eee;
  color: #333;
  position: relative;
  overflow: hidden;
}

.text {
  border: 1px solid #ccc;
  padding: 8px 20px 8px;
  height: 150px;
}

.arc-bottom-l,
.arc-bottom-r,
.arc-top-l,
.arc-top-r {
  position: absolute;
  background: #fff;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  border: 1px solid #ccc;
}

.arc-bottom-l {
  bottom: -100px;
  left: -100px;
}

.arc-bottom-r {
  bottom: -100px;
  right: -100px;
}

.arc-top-l {
  top: -100px;
  left: -100px;
}

.arc-top-r {
  top: -100px;
  right: -100px;
}

user_7882140 · Answer

Try This,

.circle {
  z-index: 10;
  position: absolute;
  width: 13em;
  height: 13em;
  border-radius: 50%;
  background: lightblue;
  top: 60px;
  left: 50%;
  margin-left: -91px;
}

.corners {
  background: #eee;
  color: #333;
  position: relative;
  overflow: hidden;
}

.text {
  border: 1px solid #ccc;
  padding: 8px 20px 8px;
  height: 150px;
}

.arc-bottom-l,
.arc-bottom-r,
.arc-top-l,
.arc-top-r {
  position: absolute;
  background: #fff;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  border: 1px solid #ccc;
}

.arc-bottom-l {
  bottom: -100px;
  left: -100px;
}

.arc-bottom-r {
  bottom: -100px;
  right: -100px;
}

.arc-top-l {
  top: -100px;
  left: -100px;
}

.arc-top-r {
  top: -100px;
  right: -100px;
}

Place circular div at the center of container for all device

2 Answers