Centering a single item in container with justify-between for multiple items in Tailwind CSS

I'm trying to align an item to the center of the container if there is only one item, otherwise justify the items between each other. However, I'm having trouble with the alignment - if there is only one item, it appears on the extreme left instead of being centered.

Following is my code:

<div class="flex justify-between items-center w-full max-w-screen-lg">
  <div class="py-4">01</div>
  <div class="py-12">02</div>
</div>

How I can make this working?

Use mx-auto in children elements to automatically align, see Playground:

<!-- original -->
<div class="flex justify-between items-center w-full max-w-screen-lg mx-auto">
  <div class="py-4">01</div>
  <div class="py-12">02</div>
</div>

<!-- Just one element -->
<div class="flex justify-between items-center w-full max-w-screen-lg">
  <div class="py-4 mx-auto">01</div>
</div>

<!-- multiple elements -->
<div class="flex justify-between items-center w-full max-w-screen-lg">
  <div class="py-4 mx-auto">01</div>
  <div class="py-12 mx-auto">02</div>
  <div class="py-12 mx-auto">02</div>
</div>

Output:

You can consider using mx-auto which will magically set your x-axis margin and sets the content to center. As mentioned in @Jishan's answer, but in the third case it is not justify-between between the items.

So you can consider using conditional operator like so:

<div class="flex justify-between items-center w-full max-w-screen-lg">
{items.length === 1 ? (
<div class="py-4 text-center">01</div>
) : (
<>
<div class="py-4">01</div>
<div class="py-12">02</div>
</>
)}
</div>

In case you need plain css, You can use the following css code:

.container > .item:first-child:last-child {
margin-left: auto;
margin-right: auto;
}

Output:

• 1 item
  

  <div class="container flex w-screen items-center justify-between bg-red-100">
  <div class="item">01</div>
  <div class="item">02</div>
  </div> 
  

• 2 items
  

  <div class="container flex w-screen items-center justify-between bg-red-100">
  <div class="item">01</div>
  <div class="item">02</div>
  </div>
  

• 3 items
  

   <div class="container flex w-screen items-center justify-between bg-red-100">
  <div class="item">01</div>
  <div class="item">02</div>
  <div class="item">03</div>
  </div>
  

Feel free to play in tailwind-play