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.
About Pragati
