How to center an absolute positioned HTML element horizontally and how to position the same element just below the border of its parent element?

Question

I'm making a pure CSS only mega dropdown which has a "position: absolute". I've attached a photo in this post of the mega dropdown.

I've managed to position the absolute positioned dropdown centered on the horizontal x-axis by using below css rules,

.dropdown-menu {
position: absolute;
left: 50%;
transform: translateX(-50%);
}

I found this solution on another stack overflow question, but I don't know why it works. Could you please tell me if this is a hack or actual rule of doing it in CSS? Is there a better and more natural and original CSS rule to achieve the same thing?

Another question,

The parent element of the absolute mega dropdown is the nav-wrapper in this case which has a 9.6rem of height. I used the below code to position the absolute mega dropdown just below the nav-wrapper's entire length just so the drop down looks more natural and not cutting of the parent element somewhere in parent element's own body.

.dropdown-menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 9.6rem; // just so it moves 9.6rem exactly from the top edge of parent element
    }

Is using the top property the correct natural way of doing it in CSS or is it a hack?

I'm new, hope the community will help me. Thanks.