<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Centering w/ CSS-grid</title>
  <div class="grid--container">
    <div class="grid--item__centered">
      centered<br>HTML Element<br>with centered<br>text
  <div class="grid--container">
      centered Text <br>
      w/o HTML Element
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;

body {
  color: white;
  font-size: 1rem;
  font-family: sans-serif;

.grid--container {
  /* set grid and center children */
  display: grid;
  align-items: center;
  justify-content: center;
  /*styles for demo*/
  width: 80vw;
  min-height: 90vh;
  margin: 5vh auto;
  padding: 2vh;
  background: #ccc;
  /*center text in line*/
  text-align: center;

.grid--item__centered {
  width: 200px;
  height: 200px;
  background: #770f0f;
  border: 2px solid white;
  border-radius: 8px;
  margin: 2vh;
  /*center text in item with flexbox*/
  display: flex;
  align-items: center;
  justify-content: center;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.