How to center a div within a div but keep it responsive and have it stay in the center

Issue

I have stacked small a div on top of another div and I want the small div to be at the bottom and centered, like this: Style.

I've searched up answers but some answers are telling me to make the small div relative but I can't do that otherwise it wont stack on top of the other div. How can I achieve this?

Here is my sandbox which explains the problem: https://codesandbox.io/s/sweet-bas-grubn

Solution

Since you are using absolute positioning, set the bottom to 0, left to 50%, then translate it left by 50% of the width.

style={{
  position: "absolute",
  backgroundColor: "white",
  zIndex: 1,
  height: "250px",
  width: "40%",
  bottom: 0,                     // <-- 0px from bottom of screen
  left: '50%',                   // <-- 50% of parent div width from left
  transform: 'translateX(-50%)', // <-- translate left 50% of child width
}}

Answered By - Drew Reese