Home > Article > Web Front-end > How to center a div inside another div?
How to center a div inside another div?
- PHPzforward
- 2023-09-08 11:13:021734browse
Introduction
Center alignment of divs is one of the most important aspects of front-end development. In this article, we will look at the technique of placing a div inside another div using HTML and CSS.
In this tutorial we will have a parent div which should have child divs. Our task is to position the child div in the center of the parent div.
Use Transform translation and positional syntax
This is not a very popular way to center align one div into another div
grammar
left:50%; top:50%; Transform: translate(-50%, -50%);
The above syntax performs the following operations -
The CSS rule "left:50%;" sets the horizontal position of an element to 50% of the left side of its container.
The rule "top:50%;" sets the vertical position of an element to 50% from the top of its container.
The rule "transform: translate(-50%, -50%);" moves the element -50% horizontally and -50% vertically, effectively positioning the center of the element a distance from the left and Top 50% position.
However, this is not a popular way to center a div within another div. This is due to the following reasons -
This requires an additional five lines of code, more than the other methods.
The positions of parent and child divs must be defined, which may cause inconvenience in designing other associated divs in the future.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container{
background-color: red;
width:50vw;
height:50vh;
position: relative;
}
.child{
background-color: yellow;
Width: 25vw;
Height: 25vh;
position: absolute;
left:50%;
top:50%;
transform:translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<div class="child">
</div>
</div>
</body>
</html>
illustrate
In the above example, we first declare that the child's position is absolute and the parent's position is relative. Next, we move the child 50% from the top and left of the parent div. Next, we use the CSS transform property to center the child div.
The translate(x, y) function takes two values as parameters, where x is the number of pixels to move the element horizontally and y is the number of pixels to move the element vertically. In this example, the element will move -50% of its width and -50% of its height, centering it vertically and horizontally.
Using Grid Properties
The more popular way to center align a div is to use CSS's grid property; however, for this, you first need to declare the div as a grid.
grammar
place-items: center;
The place-items property aligns items horizontally and vertically with the grid container. We can only use this property with grid containers.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container{
background-color: blue;
width:50vw;
height:50vh;
display: grid;
place-items: center;
}
.child{
background-color: yellow;
width:25vw;
height:25vh;
}
</style>
</head>
<body>
<div class="container">
<div class="child">
</div>
</div>
</body>
</html>
Using Flex Box properties
Another method we can use is the flexbox property of CSS. We first need to declare the parent as a flexbox. Flex box is a widely used element in CSS. They are very convenient to use because they are responsive elements and programmers generally have good control over Flexbox properties.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container{
background-color: purple;
width:50vw;
height:30vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.child{
background-color: green;
width:25vw;
height:10vh;
}
</style>
</head>
<body>
<div class="container">
<div class="child">
</div>
</div>
</body>
</html>
Center multiple nested divs
Putting multiple nested divs into a parent div is also a simple task. Suppose there are three divs, namely container, which is the parent div, and first-child, which is the child div of the container; the second child is the child of the first child. We can then first center align the first child element into the container div using the method we discussed. Next, we can make the first child the parent of the second child and apply the same technique.
As an illustration, we will use one of these methods to demonstrate the technique. Readers should try the other two methods to perform similar tasks.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
background-color: red;
width: 50vw;
height: 30vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.first-child {
background-color: green;
width: 25vw;
height: 20vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.second-child {
background-color: yellow;
height: 10vh;
width: 20vw;
}
</style>
</head>
<body>
<div class="container">
<div class="first-child">
<div class="second-child"></div>
</div>
</div>
</body>
</html>
in conclusion
In this article, we learned how to center align divs inside other divs using HTML and CSS. We looked at three different techniques for center-aligning divs. They use the position property, grid property and flexbox property. Among them, the flexbox attribute is the most widely used and the most convenient.
The above is the detailed content of How to center a div inside another div?. For more information, please follow other related articles on the PHP Chinese website!