Fix issue where we were not centering absolute nodes correctly when j…

…ustifying (#41690)

Summary:
X-link: facebook/yoga#1489

Pull Request resolved: #41690

Centering involves centering the margin box in the content box of the parent, and then getting the distance from the flex start edge of the parent to the child

Reviewed By: NickGerleman

Differential Revision: D51383625

fbshipit-source-id: 6bbbace95689ef39c35303bea4b99505952df457

packages/react-native/ReactCommon/yoga/yoga/algorithm/AbsoluteLayout.cpp

@@ -38,10 +38,21 @@ static void justifyAbsoluteChild(
     case Justify::Center:
     case Justify::SpaceAround:
     case Justify::SpaceEvenly:
+      const float parentContentBoxSize =
+          parent->getLayout().measuredDimension(dimension(mainAxis)) -
+          parent->getLayout().border(flexStartEdge(mainAxis)) -
+          parent->getLayout().border(flexEndEdge(mainAxis)) -
+          parent->getLayout().padding(flexStartEdge(mainAxis)) -
+          parent->getLayout().padding(flexEndEdge(mainAxis));
+      const float childOuterSize =
+          child->getLayout().measuredDimension(dimension(mainAxis)) +
+          child->getMarginForAxis(mainAxis, containingBlockWidth);
       child->setLayoutPosition(
-          (parent->getLayout().measuredDimension(dimension(mainAxis)) -
-           child->getLayout().measuredDimension(dimension(mainAxis))) /
-              2.0f,
+          (parentContentBoxSize - childOuterSize) / 2.0f +
+              parent->getLayout().border(flexStartEdge(mainAxis)) +
+              parent->getLayout().padding(flexStartEdge(mainAxis)) +
+              child->getFlexStartMargin(
+                  mainAxis, direction, containingBlockWidth),
           flexStartEdge(mainAxis));
       break;
   }