How to center a div - 2 Easiest and Effective way Explained

How to center a div


 How to center a div ?

Its one of most asked question from a webdev newbie or a beginner that how can be center a div (<div>). So Today in this article i am going to tell you 2 most easiest and effective ways to center a div. Let's begin with our first method :

1st Method To Center a div (<div>) :

In our first method we will use little bit css (flex box), I had written code below -




.your-div-class {

display:flex;

justify-content:center;

align-items:center;

}

This is most used and advanced way to center a div with this technique you will find much ease while making a responsive website or a webpage.

2nd Method To Center a Div (<div>) :

It is most easiest and effective ways or method to center a div it never fails. after implementing this technique its impossible that you will get results. See code below -

<div class="your-class" align="center"></div>

Explanation

Now its time to explain guys and its my favorite moment because i love to explain everybody. First of all we will understand how 1st method works. In our 1st method we had used pure css and flexbox property. I had mentioned display property value flex with mass our webpage flex or flexible the i had put value of justify-content property center which align our div horizontally center then I had put value of align-items property center which makes our div to align vertically center and this all that how our first method works.

Now its time to understand how second method works in second method we had used plain HTML and a attribute which is called align attribute we had mentioned value of that attribute center which directly center div and content inside it too.

Hope you had liked our article and learnt a new thing. If you found our article helpful please share with our developers and designers friends. Follow us on Facebook Twitter or Instagram To get updated latest Web development, Programming and SEO knowledges. 

Comments

Popular posts from this blog

👨‍💻 | How To Create Typewriter Effect Using Pure CSS

4 Most Easiest Programming Languages For Beginners | With My Experience & Suggestions

How To Shutdown PC using Python