React Native absolute positioning horizontal centre

It seems that with position:absolute in use an element cannot be centred using justifyContent or alignItems. There's a workaround to use marginLeft but does not display the same for all devices even using dimensions to detect height and width of device.

  bottom: {
    position: 'absolute',
    justifyContent: 'center',
    alignItems: 'center',
    top: height*0.93,
    marginLeft: width*0.18,
  },
  bottomNav: {
    flexDirection: 'row',
  },

Wrap the child you want centered in a View and make the View absolute.

<View style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center'}}>
  <Text>Centered text</Text>
</View>

If you want to center one element itself you could use alignSelf:

logoImg: {
	position: 'absolute',
	alignSelf: 'center',
	bottom: '-5%'
}

This is an example (Note the logo parent is a view with position: relative)

You can center absolute items by providing the left property with the width of the device divided by two and subtracting out half of the element you'd like to center's width.

For example, your style might look something like this.

bottom: {
    position: 'absolute',
    left: (Dimensions.get('window').width / 2) - 25,
    top: height*0.93,
}

create a full-width View with alignItems: "center" then insert desired children inside.

import React from "react";
import {View} from "react-native";

export default class AbsoluteComponent extends React.Component {
  render(){
    return(
     <View style={{position: "absolute", left: 0, right: 0, alignItems: "center"}}>
      {this.props.children}
     </View>    
    )
  }
}

you can add properties like bottom: 30 for bottom aligned component.

<View style={{...StyleSheet.absoluteFillObject, justifyContent: 'center', alignItems: 'center'}}>
	<Text>CENTERD TEXT</Text>
</View>

And add this

import {StyleSheet} from 'react-native';

You can try the code

<View
    style={{
      alignItems: 'center',
      justifyContent: 'center'
    }}
  >
    <View
      style={{
        position: 'absolute',
        margin: 'auto',
        width: 50,
        height: 50
      }}
    />
  </View>

It's very simple really. Use percentage for width and left properties. For example:

logo : {
  position: 'absolute',
  top : 50,
  left: '30%',
  zIndex: 1,
  width: '40%',
  height: 150,
}

Whatever width is, left equals (100% - width)/2

Well, I would use this way to center absolute Views

  <View style={{ position: 'absolute', left: '50%', marginLeft: -22 }}>
           <View style={{ position: 'absolute', width: 44, height: 44}}>
             <Ionicons name="close" color="#4775f2" size={32} />
           </View>
   </View>

Notice that In the View which is wrapping the Icon container I'm using left: 50% and the marginLeft is special because you need to put exactly the middle width of the child an turn it negative which in this case is 44 as you can see above, and that's it