Here is my CSS code snippet:
.over_center {
position:absolute;
top: 50%;
left:50%;
height: 160px; /* two thirds (2/3) of parent size */
width: 160px; /* two thirds (2/3) of parent size */
margin-top: -80px; /* negative one third of parent size */
margin-left: -80px; /* negative one third of parent size */
line-height: 160px; /* two thirds (2/3) of player size */
text-align: center;
}
What stands out in the code is the use of comments to indicate that the values are relative to the parent size, which is always square (width=height).
While JavaScript can be used to dynamically style these elements, I am intrigued by the possibility of achieving this directly in CSS for a cleaner approach.