Flexbox enables vertical horizontal center and flexbox vertical center

Flexbox enables vertical horizontal center and flexbox vertical center

Flexbox (telescopic box) is a new feature in CSS3, which can be used to solve the center problem on the page. You only need three lines of code to achieve this. You do not need to set the size of the element to adapt to the page.

This method can only be used in modern browsers, such as IE10 +, chrome, Safari, and Firefox. For example:

HTML:

First, create a div container. The container contains the content that needs to be centered.

<Div class = "container"> <! -- The elements in the container are centered -->  </div>

Three lines of CSS code:

. Container {display: flex; justify-content: center; align-items: center ;}

Note:

1. Set the display type of the container to flex and activate the flexbox mode.

2. justify-content defines the element position in the horizontal direction

3. align-items defines the element location in the vertical direction

Get it done...

 

Read more:

Flexbox full Guide

Using_CSS_flexible_boxes

Flexbox in 5 minutes

The Simplest Way To Center Elements Vertically And Horizontally