What is the difference between "text-center" and "flex flex-center"?

[wpq]

When reviewing the various table styles, I noticed that the template for masonry-style grid is

  <template v-slot:item="props">
    (...)
        <q-card-section class="text-center">
         (...)
        <q-card-section class="flex flex-center" :style="{ fontSize: props.row.calories + 'px' }">
          (...)
  </template>

How are these classes different (they both aim at centering one text element)? Which one should be used when?

[metalsadman]

@wpq text-center like the class name suggests are for texts inside an element using text-align css, flex are for containers such as divs/elements and etc… to achieve a certain layout.

[wpq]

thanks @metalsadman - I did not notice that under the former there was pure text, and under the latter a div

[metalsadman]

@wpq in the docs; former https://quasar.dev/style/typography#CSS-Helper-Classes, the latter https://quasar.dev/layout/grid.