CodePen

HTML

            
              <div class="parent">
  <p class="child"></p>
</div>
            
          
!

CSS

            
              * {
  margin:0;
  padding:0;
}

.parent {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 40px;
  outline: 1px solid red;
}

.child {
  position: absolute;
  top: 50%;
  height: 100px; 
  outline: 1px solid blue;
  width: 300px;
  margin-top: -50px; /*half of the height*/
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................