Introduction
We frequently get into scenarios where we need to centre a Div inside another Div while building the user interface for any web application. There are several techniques to centre the kid Div, but some of them are unresponsive and adjust their position according on the size of the screen, which is bad practise. Here, I’ll demonstrate three distinct techniques for centering one Div inside another.
What is Div ?
HTML’s division tag is called div. In our material, sections are made using the div tag. We utilise the div tag to separate our HTML content into parts if we need to. It resides at the block level. Block-level items fill the whole width of the page, and subsequent material begins on the following line, exactly like a new paragraph does. The division tag begins with the forward-slash div keyword with angular braces <div> and ends with angular braces </div>.
What is HTML?
Hyper Text Markup Language is what HTML is. It is a type of markup language used to write content for websites. All of the material we view when we initially open a website in a browser originates from the HTML file. The following contains boilerplate code for any HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
HTML, head, and body are the three crucial and required tags. The principal tag and container for all other tags is the HTML tag. All of the page’s details, including the page title, are contained in the Head tag. The user won’t be able to see the head tag’s content. All of the material that a user will see on a webpage is included in the body tag. Please see the html-5-interview-questions page for more information on HTML.
What is CSS ?
Cascading Style Sheet, or CSS. Web pages are styled with CSS. Every aspect of style, including font size, position, background colour, and forecolor. A web page’s style is completely handled by CSS. Please see the css-interview-questions-and-answers article for further information about CSS.
How to Position a Child Division
- Make a file in HTML with two div tags.
- Give them height, width, and a background colour using CSS.
- Now use one of three methods to centre the child div inside the parent div.
Step 1
Create two divs using the code shown below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main_div">
<div class="sub_div">
</div>
</div>
</body>
</html>
There are two div elements here, one with the class name parent div and the other with child div. During the styling process with CSS, the class property is utilised to distinguish them from one another.
Step 2
Now, we style both divs to make them distinct from one another and to make them visible when the child div is positioned on top of them.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main_div {
background: black;
height: 100vh;
width: 100vw;
}
.sub_div {
background: rgba(181 209 205);
height: 339px;
width: 700px;
border: 2px solid white;
}
Step 3
Three methods exist for centering a child div.
- position property use
- Flexbox property use
- show grid property use
1. Adding the following settings will centre the child div in the initial place.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main_div {
background: black;
height: 100vh;
width: 100vw;
position: relative;
}
.sub_div {
background: rgba(181 209 205);
height: 339px;
width: 700px;
border: 2px solid white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
We have utilised the position attribute to centre the inner div in this. The transform-translate feature was then employed. The child div can be moved on both the x- and y-axes using the translate attribute.
Output
2. Including the following attributes is the second method for centering a div.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main_div {
background: black;
height: 100vh;
width: 100vw;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.sub_div {
background:rgba(181 209 205);
height: 339px;
width: 700px;
border: 2px solid white;
}
In this, the parent div has flexbox attributes. The content is centred on the x-axis and y-axis using the flexbox’s align-items and justify-content attributes, respectively.
Output
3. Including the following attributes is the third method of centering a div.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main_div {
background: black;
height: 100vh;
width: 100vw;
display: grid;
place-items: center;
}
.sub_div {
background:rgba(181 209 205);
height: 339px;
width: 700px;
border: 2px solid white;
}
We have utilised grid attributes in this. To centre all of the information, use the grid property place-items. As the grid property only works in two dimensions, we are just utilising the place-item property to position the child div in the middle.
Output
very useful
Thanks