<div class="component">
  <div class="component__child-element"></div>
</div>
<div class="component component--reversed">
  <div class="component__child-element"></div>
</div>
.component {
  display: block;
  max-width: 30rem;
  min-height: 30rem;
  margin: 5rem auto;
  background: rebeccapurple;
  position: relative;
  border: 1px dashed rebeccapurple;
    
  &__child-element {
    display: block;
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    background: white;
  }
}

// Presentation Styles
.component:first-child {
  margin-top: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.