Center within another div

gistfile1.txt

<div id="outerDiv">
  <div class="other-divs"></div>
  <div class="other-divs"></div>
  
  <div class="div-to-be-centered"></div>
</div>


CSS
.div-to-be-centered{
            width: 300px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%); //use the exact center of div, instead of top-left corner
            background: #fff;
            padding: 10px;
            z-index: 20;
        }