In this article we will show you the solution of css center div horizontally, we will center a div in CSS horizontally using two methods. we will use two different properties place-item and flexbox.
place-item: In the first method, we have used to set the CSS property place-items to center in the body tag.
Flexbox: In the second method, we used the CSS flexbox property. To use the flexbox we have to set the display property of the div to flexbox. Then have to set the justify-content to center.
Step By Step Guide On CSS Center Div Horizontally :-
Example 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> CSS center div horizontally </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
body{
background-color: rgb(51, 50, 50);
display: grid;
place-items: center;
}
h1{
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
h3{
color : rgb(95, 194, 95) ;
font-size: 20px;
}
.box {
height: 150px;
width: 150px;
border: 2px solid darkred;
color: lightskyblue;
overflow: scroll;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> CSS center div horizontally </h3>
</center>
<div class="container">
<div class="box">
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!
</div>
</div>
</body>
</html>
- To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
- Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
- <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
- Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
- In order to style the HTML page, we'll utilize an external CSS file
- <h1> tag used to add a heading and close it with </h1> tag
- Creating a <div> with the class of container. Into it creating another div of a class of box.
- using <style> tag to add CSS
- at first add style to the class box. We have added height, width, border, and color properties. And also adding the overflow property to scroll.
- Now into the <body> tag, add the display property of grid. Then set the place-items property of the center.
Example 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> CSS center div horizontally </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;
}
.box {
height: 200px;
width: 200px;
border: 2px solid orange;
color: lightcoral;
overflow: scroll;
}
.container{
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> CSS center div horizontally </h3>
</center>
<div class="container">
<div class="box">
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!
</div>
</div>
</body>
</html>
- To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
- Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
- <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
- Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
- In order to style the HTML page, we'll utilize an external CSS file
- <h1> tag used to add a heading and close it with </h1> tag
- Creating a <div> with the class of container. Into it creating another div of a class of box.
- using <style> tag to add CSS
- first add style to the class box. We have added height, width, border, and color properties. And also adding the overflow property to scroll.
- Now address the container class and set the display to flex. Then set the justify-content to center to center the div horizontally.
Conclusion :-
At last, here in conclusion, we can say that with this article’s help, we know How to center div horizontally in CSS.
I hope this article on css center div horizontally helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
