<div class="outer">
  <div class="inner"></div>    
</div>
.outer{
  background-color:yellow;
  position: relative;
  width: 100%;
  height : 1000px;
}

.inner{
  background-color:red;
  position: fixed;
  left: 50%;
  top : 50%;
  transform: translate(-50%,-50%);
  width: 50%;
  height : 10%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.