<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>Centering Items</title>
   <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet"> 
</head>
<body>
  <div class="card">
    <h3>Center Element Horizontally</h3>
    <pre>
      <code>
        text-align: center
      </code>
    </pre>
    <pre>
      <code>
        margin: 0 auto
      </code>
     </pre>
    <pre>
        <code>
          display: flex;
          justify-content: center;
        </code>
    </pre>
  </div>
  <div class="card">
    <h3>Center Element Vertically</h3>
    <pre>
      <code>
        padding-top: 30px;
        padding-bottom: 30px;
      </code>
    </pre>
    <pre>
      <code>
        vertical-align: middle;
      </code>
     </pre>
    <pre>
        <code>
          display: flex;
          justify-content: center;
          flex-direction: column;
        </code>
    </pre>
     <pre>
        <code>
        .parent { position: relative; }
        .child {
          position: absolute;
          top: 50%;
          height: 100px;
          margin-top: -50px; 
        }
     </code>
   </pre>
     <pre>
        <code>
          .parent { position: relative; }
          .child {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
          }          
        </code>
     </pre>
  </div>
  <div class="card">
    <h3>Center Element Horizontally & Vertically</h3>
    <pre>
      <code>
      .parent { position: relative; }
      .child {
        width: 300px;
        height: 100px;
        padding: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -70px 0 0 -170px;
      }
      </code>
    </pre>
    <pre>
      <code>
            .parent { position: relative; }
            .child {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
      </code>
     </pre>
    <pre>
        <code>
          display: flex;
          justify-content: center;
          align-items: center;
        </code>
    </pre>
    <pre>
        <code>
          display: grid;
          place-content: center;
        </code>
    </pre>
  </div>
</body>
</html>
/* Page settings  */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  font-family: 'Open Sans', sans-serif;
  background: ivory;
  font-size: 15px;
  display: flex;
  align-items: center;
  flex-direction: column;
  
  margin: 0 auto;
}

.card {
  width: 400px;
  box-shadow: 0 0 1px 1px #dcdcdc;
  border-radius: 0.5rem;
  padding: 2rem 1rem;
  background: white;
}

.card + .card {
  margin-top: 5rem;
}

/* 
  make h3 & small element centered horizontally.
*/

h3 { 
  text-align: center;
}

pre {
  margin-top: 2rem;
  border-radius: 0.5rem;
  background: rgb(16, 14, 23);
  min-height: 4rem;
  color: white;
  
/*use flex box to center items vertically  */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

code {
  transform-origin: center;
  transform: translateX(-15%);
  font-family: monospace;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.