feat: Add gl--flex-center composite class

What does this MR do?

These style rules show up together a lot:

display: flex;
align-items: center;
justify-content: center;

How frequently do they show up?

In GitLab, references to .gl-display-flex.gl-align-items-center.gl-justify-content-center:

$ git grep -E "(gl-(justify-content-center|display-flex|align-items-center).*){3}" | wc -l
    72

References to .d-flex-center (a composite class that we created for this during Bootstrap utility days):

$ git grep -E "d-flex-center" | wc -l
    13

References to .d-flex.justify-content-center.align-items-center:

$ git grep -E "((d-flex|justify-content-center|align-items-center).*){3}" | wc -l
    10

Summary

I think this is a good use case for a composite class (see also relevant SCSS guide).

Alternatives

There's some cases where we use const in the code to encapsulate a set of utility classes (see example), such as:

const ROTATION_CENTER_CLASS = 'gl-display-flex gl-justify-content-center gl-align-items-center';

export default {
  ROTATION_CENTER_CLASS,
  ...
};

IMHO, this is less readable, less maintainable, and potentially even less performant than just having a single class for this highly re-occurring set of classes. Creating a composite class in this way also adheres to Tailwind's utility first workflow.

Does this MR meet the acceptance criteria?

Conformity

• Code review guidelines.
• GitLab UI's contributing guidlines.
• If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
• If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
• If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • GitLab: mr_url
  • CustomersDot: mr_url
  • Status Page: mr_url
• Added the ~"component:*" label(s) if applicable.