4 Different Ways to Center an Element using CSS
Last Updated :
06 Mar, 2024
When designing web pages, achieving proper centering of elements is important. We’ll explore different techniques to center an element using CSS. Whether you’re creating a landing page, a form, or any other web component, understanding these methods will enhance your design skills. So let us take a look at 4 different ways to center an element using CSS.
We have created a parent div and a child div. We will take a look at how to center the child div inside the parent div. The below HTML code creates a webpage with a parent div containing a child div. The child div has text content and is styled to be centered horizontally and vertically within its parent using CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>4 Different Ways to Center an Element using CSS</title>
<style>
.parent {
height: 400px;
width: 400px;
border:2px solid red;
}
.child {
height: 100px;
width: 100px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
Green Div is Centered
</div>
</div>
</body>
</html>
|
Examples of Different Ways to Center an Element Using CSS
1. Using Flexbox Property:
Example: We can use Flexbox to center the element. We can set the display property of the parent div as flex and can easily center the children div using justify-context: center (horizontally) and align-items: center (vertically) properties.
HTML
<!DOCTYPE html>
<html>
<head>
<title>4 Different Ways to Center an Element using CSS</title>
<style>
.parent {
height: 400px;
width: 400px;
border:2px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.child {
height: 100px;
width: 100px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
Green Div is Centered
</div>
</div>
</body>
</html>
|
Output:
Using Flexbox property
2. Using Margin auto Property:
Example: Another simple way to center a child div is to set it’s margin to auto and make the parent div display as grid.
HTML
<!DOCTYPE html>
<html>
<head>
<title>4 Different Ways to Center an Element using CSS</title>
<style>
.parent {
height: 400px;
width: 400px;
border:2px solid red;
display: grid;
}
.child {
height: 100px;
width: 100px;
background-color: lightgreen;
margin: auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
Green Div is Centered
</div>
</div>
</body>
</html>
|
Output:
Using Margin auto Property
3. Using Grid Property:
Example: This is a quite easy way to center elements is to use the grid property on the parent div and set the place-items: center.
HTML
<!DOCTYPE html>
<html>
<head>
<title>4 Different Ways to Center an Element using CSS</title>
<style>
.parent {
height: 400px;
width: 400px;
border:2px solid red;
display: grid;
place-items: center;
}
.child {
height: 100px;
width: 100px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
Green Div is Centered
</div>
</div>
</body>
</html>
|
Output:
Using Grid Property
4. Using Position absolute Property:
Example: We can also use the position property to center the elements.
HTML
<!DOCTYPE html>
<html>
<head>
<title>4 Different Ways to Center an Element using CSS</title>
<style>
.parent {
height: 400px;
width: 400px;
border:2px solid red;
position: relative;
}
.child {
height: 100px;
width: 100px;
background-color: lightgreen;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
Green Div is Centered
</div>
</div>
</body>
</html>
|
Output:
Using Position absolute Property
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...