JSFiddle - React, Tailwind, and code Playground

by aflynt

HTML

<section>
  <article>
    I started eating yogurts when I was 2 years old, and I never looked back.
  </article>
</section>

CSS

section {
  background: papayawhip;
  height: 300px;
  position: relative;
  width: 600px;
}

article {
  background: cornflowerblue;
  color: lemonchiffon; /* You have to love these color names... */
  font-family: arial;
  height: 100px;
  padding: 5px;
  width: 200px;
  
  /* This is what you need to center your element both vertically and horizontally. */
  left: 50%;
  position: absolute; /* Don't forget to add position: relative; to your container. */
  top: 50%;
  transform: translate(-50%, -50%);
}