Sets top and left values on the container to 50% to center the top left corner of the container within the parent

Sets top and left margins to a negative value half that of the containers height and width, bringing the center of the container to the center of the parent

Because the height of the container is unknown and dynamic, Javascript is used to get the value and set the negative margin.

Note: This method assumes the height of the parent element and each child element is fixed and known. However, the number of child elements is unknown and the total height of child elements is dynamic.

Additional styles not related to the above have been used to make this demo more presentable.