Flexbox for Vertical Horizontal centering

Flexbox (telescopic box) is a new feature in CSS3, which can be used to solve the center problem in the page. It takes only 3 lines of code to be implemented, without the need to set the dimensions of the elements to fit the page.

This method works only on modern browsers, ie10+, Chrome, Safari, and Firefox. For example:

Html:

First, create a div container inside the container that needs to center the content

<class= "container">    <!-- The elements inside the container will be centered  -    <  src = "fireworks.jpg" alt = " Fireworks "></div>

3 Lines of CSS code:

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

Note

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

2.justify-content defines the position of elements in a horizontal direction

3.align-items defining the position of elements in a vertical direction

Get...

Read MORE:

Flexbox Complete Guide

Using_css_flexible_boxes

Flexbox in 5 minutes

The simplest to Center Elements vertically and horizontally

Flexbox for Vertical Horizontal centering