how do i position an svg/div to the center vertically and horizontally

Question

i am trying to position this div to the center using bootstrap

    <section>
        <div class="container position-absolute">
            <div>
                <svg width="200" height="200" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect width="600" height="600" fill="#C4C4C4"/>
                    </svg>  
            </div>
        </div>
    </section>

Answer 1

From this answer.

Make sure to make room for the vertical centering with h-100 on the containers. And then use justify-content-center and align-items-center for the horizontal and vertical centering.

container has some max-width properties. Use container-fluid

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<section>
  <div class="container-fluid position-absolute h-100">
    <div class="row h-100 justify-content-center align-items-center">
      <svg width="200" height="200" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="600" height="600" fill="#C4C4C4"/>
</svg>
    </div>
  </div>
</section>