JSFiddle - React, Tailwind, and code Playground

by Slico

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

  <div class="test-1">
    <div class="inner-test-1">
      Center
    </div>
  </div>
  
  <div class="test-2">
    <div class="inner-test-2">
      Center
    </div>
  </div>
  
</body>
</html>

CSS

/*
if display is "block" (almost always by default)
You need to add width and margin: 0 auto; to center the element
*/
.test-1{
  background: purple;
}

.inner-test-1{
  display: block;
  margin: 0 auto;
  width: 43px;
}

/*
If element is display: inline-block, you need to add text-align: center to the parent to center it
*/
.test-2{
  background: red;
  text-align: center;
}

.inner-test-2{
  display: inline-block;
}