<div class="container">
  <div class="red-box with-margin">Without Transform</div>
</div>

<div class="container">
  <div class="red-box with-transform">With Transform</div>
</div>

body {
  padding: 1em;
}

.container {
  background-color: #ddd;
  width: 400px;
  margin: auto;
  + .container { margin-top: 1em; }
}

.red-box {
  background-color: red;
  height: 50px;
  width: 100px;
  padding: 0.2em;
  
  &.with-margin {
    margin-left: 50%;
  }
  
  &.with-transform {
    transform: translateX(50%);
  }
}