How to postition absolute div in middle of the relative postioned div-CodePudding

Like in title, i want to postion my absolute element at the middle of the relative div border, here is the picture of thing that i want to achive: picture

here is what i did for this moment. Parent div must have % width and child div must have static width in px or some diffrent static unit.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body{
            width: 100%;
            height: 100vh;
        }

        .parent-div{
            position: absolute;
            width: 30%;
            height: 50%;
            background: red;
        }

        .child-div{
            position: absolute;
            height: 200px;
            width: 200px;
            border-radius: 50%;
            background: blue;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div >
        <div >

        </div>
    </div>
</body>
</html>

CodePudding user response：

You need to just add 1 property in .child-div class

right:-100px;

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body{
            width: 100%;
            height: 100vh;
        }

        .parent-div{
            position: absolute;
            width: 30%;
            height: 50%;
            background: red;
        }

        .child-div{
            position: absolute;
            height: 200px;
            width: 200px;
            border-radius: 50%;
            background: blue;
            top: 50%;
            transform: translateY(-50%);
            right:-100px;
            
        }
    </style>
</head>
<body>
    <div >
        <div >

        </div>
    </div>
</body>
</html>

CodePudding user response：

If you add right: -100px; to the .child-div css this should move the circle into place as your preview image shows.

See below for the full css class

.child-div{
            position: absolute;
            right: -100px;
            height: 200px;
            width: 200px;
            border-radius: 50%;
            background: blue;
            top: 50%;
            transform: translateY(-50%);
        }

CodePudding user response：

Use position relative for the child div and set left to locate it properly You also need to use different way to set the width of the child div since it has static width and height set inside div with screen relative size so is wont work properly different screen sizes

CodePudding user response：

.child-div{
...
right:0;
transform: translate(50%,-50%);
...
}

By this way, you put the child to end of its container. Then, with transform(50%,-50%), the child is moved on horizontal axis by 50% of its width and on vertical axis by -50% according to its height.