A way to trim div (or any element) with parents div (CSS)

Question

Have three questions:

1. How can I make yellow circle (child div) to be trimmed when it crosses its parent red border so I see only yellow square ? (using only CSS)
2. How is it possible to fix circle by its center when it grows? Now its fixed by top left corner.
3. If I use "position: fixed" and then declare top: 10px; left: 10px; How can I add CSS transition to "top" and "left" properties ?

.parent {
width: 200px;
height: 200px;
background-color: salmon;
border: 5px solid red;
}
.child {
width: 20px;
height: 20px;
background-color: yellow;
border: 2px solid blue;
border-radius: 50%;
}
.child:active {
width: 350px;
height: 350px;
transition: width 2s linear, height 2s linear;
}

<div class="parent">
  <div class="child">
  </div>
</div>

Answer 1

1. Use overflow: hidden on parent div.
2. If it's the child you want to fix, put the following on the parent. display: grid and place-items: center. That is by far the easiest way to centre an element.
3. This question is not entirely clear. You can certainly add "position: fixed" and "top: 10px"; "left: 10px" to any div. If you mean to animate it on active then simply add the different values to those particular css attributes to your child:active class.