Web Inconsistency: Sometimes horizontally centered node has incorrect left

[rigdern]

Repro

The innermost node is being horizontally centered but it is given an incorrect left position. Here's a small repro which I extracted from my team's app:

<div style="height: 52px; width: 52px; position: absolute; align-items: center; justify-content: center; left: 72px;">
  <div style="align-items: center;">
    <div style="width: 52px; height: 52px; margin-left: 10px; margin-right: 10px;"></div>
  </div>
</div>

Expected Output

{layout: {width: 52, height: 52, top: 0, left: 72}, children: [
  {layout: {width: 72, height: 52, top: 0, left: -10}, children: [
    {layout: {width: 52, height: 52, top: 0, left: 10}, },
  ]},
]},

Actual Output

The innermost node's left is 0 but it should be 10.

{layout: {width: 52, height: 52, top: 0, left: 72}, children: [
  {layout: {width: 72, height: 52, top: 0, left: -10}, children: [
    {layout: {width: 52, height: 52, top: 0, left: 0}, },
  ]},
]},

[rigdern]

I confirmed this doesn't repro in master (bcc36cc).