I want to make a div
stick on the top of the screen without any influence to other elements, and its child element in the center.
.parent {
display: flex;
justify-content: center;
position: absolute;
}
<div class="parent">
<div class="child">text</div>
</div>
When I add the position: absolute
line, justify-content: center
becomes invalid. Do they conflict with each other and, what's the solution?
EDIT
Thanks guys it's the problem of parent width. But I'm in React Native, so I can't set width: 100%
. Tried flex: 1
and align-self: stretch
, both not working. I ended up using Dimensions to get the full width of the window and it worked.
EDIT
As of newer version of React Native (I'm with 0.49), it accepts width: 100%
.