Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Layout] Vertical centering fails when container has absolute positioning and no explicit height

See original GitHub issue

The code below renders like this, with the red square at the top of the container (screenshot from iOS 8.3 simulator):

positioning-1

If an explicit height:70 is set on the container, then the red square is vertically centered:

positioning-2

I would expect the square to be vertically centered within its container, without needing to set an explicit height. The yellow background color fills the height of the element without an explicit height set.

This is only an issue for elements that have absolute positioning, not those with relative positioning.

<View>
    <View style={{
      position: 'absolute',
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'yellow'
    }}>
      <View style={{
        backgroundColor: 'red',
        width: 10,
        height: 10
      }}/>
    </View>

    <View style={{
      opacity: 0.5,
      borderColor: 'black',
      borderWidth: 1
    }}>
      <Text>Lorem ipsum lorem ipsum</Text>
      <Text>Lorem ipsum lorem ipsum</Text>
      <Text>Lorem ipsum lorem ipsum</Text>
      <Text>Lorem ipsum lorem ipsum</Text>
    </View>
  </View>

Maybe related #384

Issue Analytics

State:
Created 8 years ago
Reactions:10
Comments:32 (8 by maintainers)

Top GitHub Comments

6reactions

ultragtxcommented, May 31, 2016

5reactions

MateuszMxxxxcommented, May 25, 2016

Top Results From Across the Web

[Layout] Vertical centering fails when container has absolute ...

I would expect the square to be vertically centered within its container, without needing to set an explicit height. The yellow background color ......

Vertically align absolutely positioned element with flexbox

An absolutely-positioned child of a flex container does not participate in flex layout. As an alternative, you can try this: html { height: ......

15 ways to implement vertical alignment with CSS

Learn 15 ways to implement vertical alignment for text with CSS, such as explicit grid row placement and pseudo-elements on flex containers.

Absolute Horizontal And Vertical Centering In CSS

In this article, Stephen Shaw introduces a technique for perfect horizontal and vertical centering in CSS, at any width or height.

Centering in CSS: A Complete Guide

Sometimes inline / text elements can appear vertically centered, just because there is equal padding above and below them. If padding isn't an ......