155

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',
  },
1
  • Does your element has static width or dynamic? May 19, 2016 at 8:22

8 Answers 8

401

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>
6
  • 41
    Very useful. There's a nice shortcut for those style params hanging off of StyleSheet object: ...StyleSheet.absoluteFillObject. see github.com/facebook/react-native/blob/master/Libraries/…
    – wkw
    Mar 4, 2017 at 19:35
  • 3
    Doesn't this make the View take up ALL clickable space on the screen? E.g if I had a component underneath this absolutely positioned View, I wouldn't be able to register clicks on it.
    – James111
    Jan 16, 2018 at 4:49
  • 17
    @James111 It looks like you can add pointerEvents='box-none' to pass the touches through the view: github.com/facebook/react-native/issues/12360 Jan 17, 2018 at 10:30
  • This method recovers the entire image if the text has a background color :/ Sep 26, 2018 at 8:10
  • @codewise yep, there is a new way to do it, check out my answer Jan 2, 2019 at 14:13
123

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)

enter image description here

5
  • 1
    alignSelf didn't work for me (it did nothing, in fact). Could you add a little bit more context to the code?
    – johnny
    Apr 8, 2019 at 22:51
  • 1
    You need the parent to be display: 'flex' @wilc0 Sep 19, 2019 at 19:06
  • also works with: <View style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center'}}> <Text>Centered text</Text> </View> Feb 3, 2021 at 3:17
  • 1
    alignSelf worked fine for me, bottom: -5 was not needed. Feb 9, 2021 at 16:37
  • the -5 its because as the image posted as an example, I wanted my circle to be "floating between both layouts :) @LalitSharma Feb 9, 2021 at 19:21
20

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,
}
2
  • 2
    this only works if you know the elements width beforehand
    – Adamski
    Dec 20, 2017 at 12:31
  • 3
    If you don't know the element doesn't have a known width you can use onLayout to get the elements width measure(layout) { const { width } = layout; this.setState({ width: width }) } ... <View onLayout={(event) => { this.measure(event.nativeEvent.layout) }} ...
    – Corey
    Dec 20, 2017 at 21:18
10

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.

1
  • This has to be accepted as the correct answer, this works for pretty much every situation. Nov 17, 2020 at 9:30
6
<View style={{...StyleSheet.absoluteFillObject, justifyContent: 'center', alignItems: 'center'}}>
    <Text>CENTERD TEXT</Text>
</View>

And add this

import {StyleSheet} from 'react-native';
1
  • 2
    Short, code-only answers are often frowned upon on Stack Overflow. In order to avoid being flagged as 'low quality', consider adding some explanatory text. Oct 30, 2019 at 13:06
3

You can try the code

<View
    style={{
      alignItems: 'center',
      justifyContent: 'center'
    }}
  >
    <View
      style={{
        position: 'absolute',
        margin: 'auto',
        width: 50,
        height: 50
      }}
    />
  </View>
1
  • Haha. This is working for me, However, we need add ` style={{ alignItems: 'center', justifyContent: 'center', flexDirection: 'row' }} `
    – babie
    Aug 29, 2019 at 8:27
2

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

-1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.