CSS Centering

by QMaster

HTML

<div class="vertical">
  <div class="horizontal">
    <div class="content">
      I'm centered in the vertical and horizontal thing
    </div>
  </div>
</div>

SCSS

.vertical {
  //border: 1px solid green;
  writing-mode: vertical-rl;
  text-align: center;
  height: 100%;
  width: 100%;
}

.horizontal {
  //border: 1px solid blue;
  display: inline-block;
  writing-mode: horizontal-tb;
  width: 100%;
  text-align: center;
}

.content {
  text-align: left;
  display: inline-block;
  border: 1px solid #e0e0e0;
  padding: .5em 1em;
  border-radius: 1em;
}