How To Center A Div Horizontally and Vertically Using HTML and CSS - CSS Flexbox

Опубликовано: 22 Сентябрь 2021
на канале: Sameer Saini

22,540

Let's discuss the most asked question!! How to center a div inside a div both horizontally and vertically using HTML and CSS.

We will discuss two options here, the first option will center the div vertically and horizontally using the position attribute. We will use the top and left properties to position the dive 50% from top and left. and then translate it back with a negative 50% on both x and y axis.

In the second approach, we will use CSS Flexbox, This is the recommended and easier approach.
Using css flexbox, we will set the container display property to flex and then add justify-content to center and align-items to center.