CODEWITHSUNDEEP
angularcss
3D_fun
3D_fun

Reputation: 603

Element positioning - reference to a higher component

I've some Angular application with similar structure as below, and I would know, is it possible to position divWhichShouldBeInCenterOf-appMainComponent in the center of appMainComponent using css (at the end of the post)?

appMainComponent
|
 -- internalComponent
    |
    --div
       |
       --component
        |
        --divWhichShouldBeInCenterOf-appMainComponent

CSS

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Upvotes: 0

Views: 75

Answers (1)

Kareem Kamal
Kareem Kamal

Reputation: 1048

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

this CSS centers the element and removes it from the page flow. it will be in the center of the nearest positioned parent

which means that if any element between divWhichShouldBeInCenterOf-appMainComponent and appMainComponent that has position other than static, it will be used as a reference to be centered against.

Upvotes: 1

Related Questions