INTRODUCTION

As the Hardest problem for programmers arises that how to center a div. Centering a div will be as hard as solving global issues. Jokes aside if you want to center a div or want to make your designs easy and responsize flexbox is the way to go. If you have worked on CSS you probably know that positioning a card or div in center,end, bottom etc. is difficult without knowing of flex-box.

WHAT IS CSS FLEX-BOX ?

CSS Flexible Layout Box, popularly known as Flexbox is a powerful one-dimensional layout model. It helps to lay, align and distribute items (children) efficiently inside a container (parent).

These are all tech jargons .Let’s try to understand it better.

There are just two main parts for a flex box , one is parent and the other one is child.

In this image we can see that there are two types of boxes, a large carboard box and inside that we have small carboard boxes . Now the large cardboard box will be called as the parent of the small carboard box. small carboard boxes will be the children of the large carboard box.

Now let’s redefine the defination of flex-box to our understandings-

with the help of flex-box we can define from the large cardboard box we can determine how the small carboard box will be placed inside it, the alignment the layout, the distribution of the spaces etc between them.

HOW CAN WE MAKE A PARENT AND CHILDREN IN FLEX-BOX ?

Now we know what is flex-box . Now we need to know who is parent and children in our codes and let’s see how can we initialize a flex-box and know who are the children.

In this code inside the parent <div> we have four <div> with classes as child . Here the parent class will be called as the parent container and the child class will be called as a child container or as chid item.

by default if we run the code -

Now to use the flex-box we can just use - display:flex; in the parent container.

results -

WHAT HAPPENS WHEN WE DECLARE FLEX-BOX ?

When we declare flex-box the parent element is divided into two axis - i.e main axis and cross axis

main axis - It determines the horizontal axis of the parent.

cross axis - It determines the vertical axis of the parent.

main start-

main end-

cross start-

cross end -

Now the main Question arises: How to center a <div>

To align the children in center horizontal axis, in felx terms it will be in the main axis we use the property

justify-content

Now let us see , what are the values we have and what it does -

center a div horizontally

output -

Now let’s see some of the properties of justify content -

    /* Positional alignment */
    justify-content: center;
    justify-content: start;
    justify-content: end;
    justify-content: flex-start;
    justify-content: flex-end;
    justify-content: left;
    justify-content: right;

    /* Distributed alignment */
    justify-content: space-between;
    justify-content: space-around;
    justify-content: space-evenly;
    justify-content: stretch;

To align the children in center vertical axis, in felx terms it will be in the cross axis we use the property

align-items

  /* Basic keywords */
  align-items: normal;
  align-items: stretch;

  /* Positional alignment */
  /* align-items does not take left and right values */
  align-items: center;
  align-items: start;
  align-items: end;
  align-items: flex-start;
  align-items: flex-end;
  align-items: self-start;
  align-items: self-end;
  align-items: anchor-center;

  /* Baseline alignment */
  align-items: baseline;
  align-items: first baseline;
  align-items: last baseline; /* Overflow alignment (for positional alignment only) */
  align-items: safe center;
  align-items: unsafe center;

  /* Global values */
  align-items: inherit;
  align-items: initial;
  align-items: revert;
  align-items: revert-layer;
  align-items: unset;

Now let’s see what are the values and what it does -

Output -

Now let’s solve the fish in the water: How to center a <div>

we have just studied about the justify-contetnt and align-items . we know that justify-contetnt aligns items horizontally and align-items align vertically . if we use both we can align a children in center.