Problem with flex-box Layout in React Native-CodePudding

Let's say there is a square-shaped container, How can make sure that B is centered while A is in the top-left corner like in the picture?

If I put B in a View and justifyContent to center, B is only centered to the space left between A and the bottom of the container. How do I stop A from pushing B down?

CodePudding user response：

You can use position: 'absolute' for A in this case.

<View style={{ height: 100, width: 100, backgroundColor: 'red', justifyContent: 'center', alignItems: 'center' }}>
  <Text style={{ position: 'absolute', top: 0, left: 0, color: 'white' }} >A</Text>
  <Text style={{ color: 'white' }} >B</Text>
</View>