How do I get an absolute positioned div to sit centred horizontally with a fixed div?

Question

I am trying to get a div(main) to sit centred withing another div(centre), the div(main) needs to be static as I don't want it to scroll but the div(centre) has to be absolute so it can sit on a separate div with an onclick function.

current HTML and css:

 <div className='meal_popup'>
                    <div className='meal_popupElement'>
                        <p>testing1</p>
                    </div>
                    <div onClick={this.mealOne_boxClickHandler} className='meal_popupBackground' />
                </div>

.meal_popup {
  position: fixed;
  display: flex;
  align-items: center;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
}


.meal_popupElement {
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 15px;
  height: 35rem;
  margin-left: 1rem;
  margin-right: 1rem;
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    z-index: 2;

}

.meal_popupBackground {
  position: relative;
  background: rgba(00, 00, 00, 0.6);
  width: 100%;
  height: 100%;
  z-index: 1;
}

Result:

Goal: (this visually looks how I want but the problem is the whole div is clickable and only want that function on the background HTML and css:)

<div onClick={this.mealTwo_boxClickHandler} className='meal_background'>
                    <div>
                        <p>testing2</p>
                    </div>
                </div>


 .meal_background {
      position: fixed;
      display: flex;
      align-items: center;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(00, 00, 00, 0.6);
      z-index: 30;
    }

    .meal_background div {
      background: white;
      border-radius: 15px;
      height: 35rem;
      width: 100%;
      margin-left: 1rem;
      margin-right: 1rem;
      box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
        0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    }

Answer 1

So the problem appears to be with setting left a or right margin values at the edge to create a space either side like I normally would. so instead of width 100% and 1rem left/right margin (which id use as is great for scaling. I had set a preset width and implement the code above provided by @RitanshuSingh. so my code looks like this:

.meal_popup {
  position: fixed;
  display: flex;
  align-items: center;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
}

.meal_popupElement {
  position: absolute;
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border-radius: 15px;
  height: 35rem;
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  z-index: 2;
}

.meal_popupBackground {
  position: relative;
  background: rgba(00, 00, 00, 0.6);
  width: 100%;
  height: 100%;
  z-index: 1;
}

preferably would like to select a margin but this works for now if you know how to get that working please post a fix.

result:

Answer 2

To center any element with position property different than static, you can use the following code. However, be clear that the following code takes slightly more CPU time than other methods;

To center Horizontally

left:50%;
transform: translateX(-50%);

To center vertically

top: 50%;
transform: translateY(-50%);

And particularly for this answer apply right: 0px; on the container with fixed positioning and also apply the code to center horizontally on the element you want to center.