React Native absolute positioning horizontal centre

Question

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

User · Accepted Answer

Wrap the child you want centered in a View and make the View absolute     lt View style   position   absolute   top  0  left  0  right  0  bottom  0  justifyContent   center   alignItems   center    gt     lt Text gt Centered text lt  Text gt   lt  View gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

lt View style      StyleSheet absoluteFillObject  justifyContent   center   alignItems   center    gt     lt Text gt CENTERD TEXT lt  Text gt   lt  View gt    And add this  import  StyleSheet  from  react-native

User · Answer

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        lt View style   position   absolute   left  0  right  0  alignItems   center    gt         this props children        lt  View gt                    you can add properties like bottom  30 for bottom aligned component

User · Answer

You can try the code    lt View     style          alignItems   center         justifyContent   center            gt       lt View       style            position   absolute           margin   auto           width  50          height  50                gt     lt  View gt

[position] React Native absolute positioning horizontal centre

Examples related to position

Examples related to react-native

Examples related to flexbox

Examples related to absolute