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
Share your thoughts in the comments
Please Login to comment...