CSS-position-element-center.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Position an element center</title>
    <style>
      h1 {
        color: chocolate;
        text-align: center;
      }
      code {
        color: rgb(17, 189, 17);
        font-weight: bolder;
        text-align: center;
        display: block;
      }
      .parent {
        width: 600px;
        height: 600px;
        background: red;

        /*Centering element */
        position: relative;
        left: 0;
        right: 0;
        margin: 0 auto;
      }
      .child img {
        /* display: inline-block; */
        border: none;
        height: 300px;
        width: 300px;

        /*Centering the element*/
        position: absolute;
        left: 50%;
        margin-left: -150px; /*Negative Half width of the element*/
        top: 50%;
        margin-top: -150px; /*negative Half height of the element */

        /*transform: translate(-50%, -50%); if width/height is unknown*/
      }
    </style>
  </head>
  <body>
    <h1>Center element(s) using CSS Position</h1>

    <div class="parent">
      <div class="child">
        <img src="img/birds.png" alt="" />
      </div>
    </div>
    <code>
      <h3>Method: one</h3>
      position: relative; <br />
      left: 0; <br />
      right: 0; <br />
      margin: 0 auto; <br />
      *Outer Element
    </code>

    <hr />
    <div class="parent">
      <div class="child">
        <img src="img/pencil.png" alt="" />
      </div>
    </div>
    <code>
      <h3>Method: Two</h3>
      position: absolute; <br />
      left: 50%; <br />
      margin-left: -150px; <br />
      top: 50%; <br />
      margin-top: -150px; <br />
      *Inner Element
    </code>
  </body>
</html>