Best practice here i guess is more like
```.parent {
position: relative;
}
.child {
position: absolute;
left: 50%; // Relative to the parent element so it will be 50% of parent width + child width
top: 50%; // Relative to the parent element so it will be 50% of parent height + child height
transform: translate(-50%, -50%) // Relative to the child element so -50% of width and height
}
```
Then you have a perfect centered child in his parent.
Best practice here i guess is more like
```.parent {
position: relative;
}
.child {
position: absolute;
left: 50%; // Relative to the parent element so it will be 50% of parent width + child width
top: 50%; // Relative to the parent element so it will be 50% of parent height + child height
transform: translate(-50%, -50%) // Relative to the child element so -50% of width and height
}
```
Then you have a perfect centered child in his parent.