CSS step by step guide to center div using Flex and Grid
When designing a website one of the most important things is to align the content properly. With css you have complete control over the content alignment of the div. When it comes to creating a div, there are many techniques you can try. Three most popular methods are using width margin,Grid and flexbox. In this article, we are going to see the step by step guide to center div in css.
Step 1: Creating a Div Container
The first step is to create a div container which we are going to center. div container is the section of the web page that we are going to align in the center of the display.
To create a div, you have to create a html file and write the following code into it.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Center Div</title>
<style type="text/css" media="all">
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>Step 2: Center div using 'width' and 'margin'.
Next, you need to create a 'style' tag under the 'head' section on 'html'.
To center a div, write the following CSS code.
.parent{
width: 100%;
margin: 0 auto;
text-align: center;
}The 'width' property is used to adjust the width of the div container. The 'margin' property is set to '0 auto' which centers the div horizontally. The 'text-align' property sets all the text content inside the div to the center.
Step 3: Center div using Grid
To center div, first you need to set div container to display: grid; and place-items:center;
The Following code will center a div horizontally and Vertically.
.parent{
display: grid;
place-items: center;
height: 100vh;
}The 'display' property is used to set the container for display as a grid. The 'place-items' property adjusts the div center horizontally and Vertically. The 'height' property sets the '100vh' height of the container to the full height of the viewport.
Step 4: Center div using Flexbox
To center a div using Flexbox, first you need to set div container style property to display:flex; and align-items:center;
The following code will center the div container horizontally and Vertically.
.parent{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}The 'display' property sets the container to display as a flex. The 'align-items' property adjusts the div vertically center and 'justify-content' property center horizontally. The 'height' '100vh' property sets the div container height to the full height of the viewport.
Step 5: Test you div alignment
Finally, test that your div is centered perfectly in the browser. If everything is done correctly the div is centered horizontally and vertically.
In conclusion, there are many methods to center a div in css. width margin, Grid and Flexbox are the Simple popular methods to center a div. No matter if you are a beginner or an experienced web developer, grid and flexbox is the best way to center a div every time.
0 Replies so far - Add your comment