In this article we will show you the solution of how to center a div css, to center a div using CSS, we will see two different methods. Let us know about the properties we are gonna use.
Transform:translate() : According to the X-axis and Y-axis arguments specified, the translate() method in CSS moves an element from its existing position.
Margin: to center a div we have to set the margin property to auto auto to horizontally and vertically center a div.
Step By Step Guide On How To Center A DIV CSS :-
Method 1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> how to center a div css </title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"> <style> body{ background-color: rgb(51, 50, 50); font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; } h1{ color : rgb(95, 194, 95) ; font-size: 25px; font-weight : bolder ; } h3{ color : rgb(95, 194, 95) ; font-size: 20px; } .container{ height: 200px; width: 200px; background-color: rebeccapurple; color: aliceblue; position: relative; } .content{ height: 50%; width: 50%; background-color: blanchedalmond; color: black; position: absolute; text-align: center; top: 50%; left: 50%; transform: translate(-50%,-50%); } </style> </head> <body> <center> <h1> TALKERSCODE </h1> <h3> how to center a div CSS </h3> </center> <div class="container"> <div class="content"> Center a div </div> </div> </body> </html>
- writing HTML code <!DOCTYPE html> is used to specify the HTML version that a file is written in.
- The <HTML> tag used to specify the root of an HTML document must then be written. Additionally, add the </html> tag at the end.
- The metadata for the HTML file is contained in the <head> tag, which is closed with </head> tag.
- The HTML document's <title> is then established using the title tag, which is followed by the < /title> tag.
- We'll use an external CSS file to style the HTML page.
- The <h1> element is used to add a heading, and the </h1> tag is used to close it.
- creating a <div> with the class of container. adding a new <div> of a class of content to it. We will center the content div into the container div.
- using <style> tag to add CSS
- now addressing the container class which is the outer div, setting the height and width, color, and background color to it. Also setting the Position to relative.
- Then into the content class, set the height and width to 50%. Add different colors and background colors. Set the Position to absolute. Now set the top and left to 50%. Lastly set the transform to translate(-50%, -50%).
- Now the content div is centered in the container div
Method 2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> how to center a div CSS </title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"> <style> body{ background-color: rgb(51, 50, 50); font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; } h1{ color : rgb(95, 194, 95) ; font-size: 25px; font-weight : bolder ; } h3{ color : rgb(95, 194, 95) ; font-size: 20px; } div { height: 200px; width: 200px; border: 2px solid orange; color: lightcoral; overflow: scroll; margin: auto auto ; } </style> </head> <body> <center> <h1> TALKERSCODE </h1> <h3> how to center a div css </h3> </center> <div> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis ipsa assumenda maiores, quisquam ullam, perferendis eaque adipisci, saepe dolores distinctio fugit sapiente facere repellendus iure! </p> </div> </body> </html>
- writing HTML code <!DOCTYPE html> is used to specify the HTML version that a file is written in.
- The <HTML> tag used to specify the root of an HTML document must then be written. Additionally, add the </html> tag at the end.
- The metadata for the HTML file is contained in the <head> tag, which is closed with </head> tag.
- The HTML document's <title> is then established using the title tag, which is followed by the < /title> tag.
- We'll use an external CSS file to style the HTML page.
- The <h1> element is used to add a heading, and the </h1> tag is used to close it.
- Create a <div> and write some paragraph within <p> tag
- using <style> tag to add CSS
- at first specify height and weight to the div. then adding a border to the div and also the color of the text. Set the overflow to scroll
- now to center the div, set the margin to auto auto.
Conclusion :-
At last, here in conclusion, we can say that with this article’s help, we know How to center div in CSS.
I hope this article on how to center a div css helps you and the steps and method mentioned above are easy to follow and implement.