You can center align the text of figcaption as

figcaption{
    text-align: center;
}

.image1 {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

figcaption {
  text-align: center;
}

<figure>
  <img src="https://picsum.photos/200/300" alt="T-shirt colors" class="image1">
  <figcaption>Choose from are variety of t-shirt colors</figcaption>
</figure>

This can be achieved by seting the text-align property on figcaption to center like so:

figcaption {
    text-align: center;
}

You could try adding text-align: center; to your figcaption tag.

in future, you may want to add in a little code.io for us to play around with. we dont know how your parent box looks like, or the css of your parents box.

you may want to check this out

http://howtocenterincss.com/

it is a very useful cheat tool, i think

Here is my HTML code for the image.

.image1
{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

<figure>
  <img src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="T-shirt colors" class="image1">
  <figcaption>Choose from are variety of t-shirt colors</figcaption>
</figure>

How do I get my text to center up below the image?