way's to center divs in css

As a web developer, sometimes centering a div or text may feel like one of the toughest jobs on planet Earth.in this article we'll learn:

1. What divs are and why center them.
2. How to center text:
   • horizontally
   • vertically
3. How to center divs:
   • horizontally
   • vertically

What are divs?


Divs - short for content division elements — they are HTML elements that can divide your web page into sections so you can target them with unique CSS properties.

Understanding how to center divs and text in divs, in particular, is a valuable skill for beginner programmers. It can help prevent content from stretching out to the edges of its container, overlapping with other elements on the page, or other issues that arise when creating web page layouts.

How to center text.horizontally,vertically.

There are three ways to center text in a div vertically. They're slightly more complicated than the methods for centering text in a div horizontally.

Let's take a look at examples of two methods below.

• Using the Padding Property.
There are many ways to center an element vertically in CSS. A simple solution is to use top and bottom padding: The result




• Using the text-align method.

To center text or links horizontally, just use the text-align property with the value center:

see the result

How to center divs horizontally and vertically.

there are few different ways of setting a div center in css.While it’s easy to center a div horizontally on a page, it’s trickier to do so vertically (but still manageable!). but we'll be at it together .

• Using flexbox to center a div horizontally

Flexbox is the most modern way to center things on the page, and makes designing responsive layouts much easier than it used to be. However, it's not fully supported in some browsers like Internet Explorer.

To center an element horizontally with Flexbox, just apply display: flex and justify-content: center to the parent element,see the visual example below :

the result

• Center a Div Vertically with CSS using absolute positioning and negative margin

To center the div element using the child element,you have to set the margin-top property to (negative of half the child element's height)and also using the absolute positioning feature:

check the result

conclusion

Thanks for reading this article! I hope you liked what you read on some methods to center a div , I'll also share other ways on how to center divs and text in my article some other time,I hope that they come handy to you in the future.

Do consider sharing this article with your friends – I'd really appreciate that. Stay tuned for more amazing content. Peace out! 🖖

you can practice more and learn from W3Schools
https://www.w3schools.com