Keep element with a percentage as a position fixed
Keep element with a percentage as a position fixed I have a container of variable height, and would like to put an element at the middle of it. So I've set these styles: #parent { position: relative; } #child { position: absolute; top: 50%; transform: translateY(-50%); } Which work in most cases. However, the container's height is not only variable, but it also changes constantly. Because of this, that code won't work. An example: @keyframes changeSize { 0% { height: 100px; } 50% { height: 150px; } 100% { height: 100px; } } #parent { position: relative; width: 400px; height: 300px; background: red; animation-name: changeSize; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } #child { position: absolute; margin-block-start: 0; margin-block-end: 0; right: 0; top: 50%; transform: translateY(-50%); } <div id="parent"> <p id="ch...