Are text-align and align-items the same when it comes to text alignment in CSS?

Text alignment in CSS may seem straightforward, especially given how far modern browsers have come. However, one often overlooked aspect is the difference between text-align and align-items. While both properties can be used to center content, they serve different purposes and are applied in different contexts. Let's dive in!
The text-align property is used to align inline content, such as text, within a block-level element. For example, if you want to center text, you can use text-align: center on a paragraph.
This moves all the individual characters of the text to the middle of each line, centering them horizontally within the block. Think of it as the CSS equivalent of centering text in a word processor or rich text editor. It only affects the inline content inside the element, not the element itself.
On the other hand, align-items is a property used in Flexbox (and Grid) layouts. It aligns the items (child elements) within a flex container along the cross axis (usually vertical, unless the flex-direction is changed).
When you use align-items: center, it centers the entire block-level element (e.g., a paragraph) within the flex container. However, it does not affect the alignment of the text inside that block.

p {
  /* Centers the text inside the paragraph */
  text-align: center;
}

This moves all the individual characters of the text to the middle of each line, centering them horizontally within the block. Think of it as the CSS equivalent of centering text in a word processor or rich text editor. It only affects the inline content inside the element, not the element itself.
On the other hand, align-items is a property used in Flexbox (and Grid) layouts. It aligns the items (child elements) within a flex container along the cross axis (usually vertical, unless the flex-direction is changed).
When you use align-items: center, it centers the entire block-level element (e.g., a paragraph) within the flex container. However, it does not affect the alignment of the text inside that block.
https://codepen.io/chalarangelo/pen/azzOxGX
As demonstrated in the CodePen above, the key difference between the two properties is their scope of influence:

• text-align: center affects the inline content within a block element.

From 30-seconds-of-code: text-centering-line-block