How to align center in flexbox

How to align center in flexbox | Properties To Align Text in CSS Flexbox

by

The most important reason that flexbox immediately caught the attention of web developers is that it took proper alignment skills to the web for the first time. It allowed proper vertical alignment, so everyone can ultimately easily center a box. In this tutorial, we will take a thorough look at how the alignment and justification properties work and align center in Flexbox.

Properties that control alignment

The properties that are used to control alignment are as follows:

  • justify-content — controls the alignment of all items on the main axis.
  • align-items — controls the alignment of all items on the cross axis.
  • align-self — controls alignment of an individual flex item on the cross axis.
  • align-content — described in the spec as for “packing flex lines”; controls space between flex lines on the cross axis.

How to Center Text in CSS Using text-align?

If you want to utilize CSS to the center text within an element such as a div, header, or paragraph, then you can use the CSS text-align property.

Fixing the text-align property to the center is the most popular method to horizontally align text by CSS. This method is not limited to just text, it can be applied to center most child elements that are smaller than the container element.

There are three things that must be commenced for text-align to properly horizontally center text and child elements.

  • The text or target element needs to be covered or contained by a parent (wider of course) element.
  • The parent element’s text-align CSS property should be set to ‘center’.
  • In case you are centering an element its display property should be ‘inline-block’.

If you hold various child elements they will collectively center within the parent element. Also, text-align has multiple valid properties:

  • center: text is centered
  • left: text is aligned to the container’s left side
  • right: text is aligned to the container’s right side
  • justify: text is forced to line up with the container’s left and right edges, except for the last line
  • justify-all: forces the last line to justify it’s text
  • start: same as left if language text direction is left to right. But right if the language text direction is right to left.
  • end: the opposite of start
  • match-parent: similar to inherit, except start and end are calculated with respect to the parent element

Make use of the above properties to align text within the parent or wrapper div.

Also Refer: How to make a collapsible menu using only CSS

How to Align Center in Flexbox?

Flexbox has become my favorite way to center an element on a page.

You wrap an item in adiv, and you set display: flex and justify-content: center.

<div class="wrapper"> ... </div>
.wrapper {
  display: flex;
  justify-content: center;
}

Using Tailwind CSS it’s easier, all you have to do is to add the flex and justify-center classes:

<div class="flex justify-center">
   ...
</div>