Vertically/Horizontally Align With Flexbox

2 October, 2019

Example

<style>
  .ctr{
    display: flex;
    align-items: center; /* vertical alignment */
    justify-content: center; /* horizontal alignment */
  }
</style>

<div class="ctr">
  <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100" fill="black"/>
  </svg>
</div>

This can extend to anything you could want to center.