CODEWITHSUNDEEP
cssreactjsflexbox
Shawn Wang
Shawn Wang

Reputation: 2782

React JS : using `flexbox` to implement one div over another

React JS, implement one div over another using flexbox layout only.

Upvotes: 2

Views: 3213

Answers (2)

AngYC
AngYC

Reputation: 3933

There isn't other ways I can think of except of calc()

<div style="display: flex; height: 200px; align-items: center;">
    <div style="flex: 0 0 100%; height: 100%; background-color: grey;"></div>
    <div style="width: 30%; height: 60%; margin-left: calc(-50% - (30% / 2)); background-color: red;"></div>
</div>

The support for calc() http://caniuse.com/#feat=calc is pretty good now

Note that 30% in margin-left is the width of the overlay element, if the element's width is let say 30px, change the 30% in margin-left to 30px

Upvotes: 2

Kelvin
Kelvin

Reputation: 64

Try align-self: center; and margin: 0 auto; to set the box in center.

Upvotes: 0

Related Questions