How do I center this text vertically?

I am working on the Challenge Project: Build a Website Design System. I have the color swatches in their own divs, but I want to center the name of each swatch (e.g. “Periwinkle”) within the center of its circle. I have tried messing with the padding, but it just messes up the layout. Any suggestions?

Here is the link to the code I’m working on: https://codepen.io/jenergy/pen/OJQEWQo/6958de5127912a7ade34a440a7b5b50d

I might try:
for .color-panel p

  position: relative;
  top: 65px;

or maybe:
margin-top: calc(50% - 0.5em);

2 Likes

Your first solution worked! Thanks!