How to Align a Div to Middle (horizontally/width) of Page using CSS ?
Last Updated :
06 Mar, 2024
We are going to see how we can align a div horizontally using CSS. Centering content both vertically and horizontally is one of the most important functions that needs to be done. Here horizontally align refers to the same amount of space to the left and right of the div inside the parent div. Three approaches can be used to achieve this layout and both of them are listed and demonstrated below.
But first, Let’s create a div to place the div into the middle (horizontally) we need to create a fixed-size div and give a background color so that it can be visible. Set the main container width to 100% so the div can be moved around into the container.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to align div to the middle
(horizontally/width) of the page?
</title>
<style>
.container {
height: 200px;
width: 100%;
margin: 0px 15px;
}
.innerDiv {
background-color: black;
width: 400px;
height: 75px;
}
</style>
</head>
<body>
<div class="container">
<div class="innerDiv">
<p> Example to center div horizontally
</p>
</div>
</div>
</body>
</html>
|
Now that we have seen the structure of the code, let’s understand the different approaches to center the div horizontally.
Horizontally Center a Div Using CSS: Flexbox approach
This approach involves the usage of one of the display properties of CSS which is flex. The parent div which will contain the child div which will be centered needs to have its display set to flex and then must have its content justified to center using the justify-content: center property.
Syntax:
parentDiv {
display: flex;
justify-content: center;
}
childDiv {
// Width and height properties
}
Example: The code demonstrates how we can use the display property approach to get a div and event the content inside it to be horizontally centered in the div.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to align div to the middle
(horizontally/width) of the page?
</title>
<style>
.container {
display: flex;
justify-content: center;
/* The properties below are
for better representation */
height: 200px;
width: 100%;
margin: 0px 15px;
}
.innerDiv {
background-color: black;
width: 400px;
height: 75px;
color: azure;
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<div class="innerDiv">
<p>
This div is at the center,
using display property
</p>
</div>
</div>
</body>
</html>
|
Output:
Horizontally Center a Div Using CSS: Flexbox Method
Explanation:
We used the display: flex on the parent container (.container) to create a flexible layout. The justify-content: center property centers the child <div> horizontally within the parent and adjusts the .innerDiv dimensions and styling as needed.
Center a Div Horizontally with Margin Auto CSS Styling
Here to make the div horizontally centered the margin in the x-axis needs to be auto which means the margin to the left and right of the div to be the same so put it in the center. Also if you want to make the div vertically centered then make the margins in the x and y axis auto and it will put the div in the center of the parent container.
Syntax:
div {
margin: 0 auto;
// Add your code
}
Example: The code demonstrates how we can use the margin auto technique to center the div horizontally.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to align div to the middle
(horizontally/width) of the page?
</title>
<style>
.container {
margin: 0 auto;
background-color: darkolivegreen;
width: 300px;
height: 75px;
color: azure;
}
p {
/* The inner text of the
div is centered */
padding-top: 1.5rem;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<p>
This div is at the center
using Margin Auto
</p>
</div>
</body>
</html>
|
Output:
Center a Div Horizontally with Margin Auto
Explanation:
We utilized the browser capability by using the CSS margin property, we set the margin value to auto so the browser can adjust with the available space and place the div into the center of the viewport.
Horizontal Centering div using Position Property
This approach includes the usage of the position properties of CSS to make horizontally centered our div. we will make the position of the container absolute.
Syntax:
.container{
position: absolute;
left: 50%;
transform: translate(-50%);
}
Example: The code demonstrates how we can use the position property approach to horizontally center a div.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to align a div to the
middle (horizontally/width)
of the page?
</title>
<style>
.container {
position: absolute;
left: 50%;
transform: translate(-50%);
background-color: darkslategrey;
width: 300px;
height: 75px;
color: whitesmoke;
}
p {
/* The inner text of the
div is centered */
padding-top: 1rem;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<p>
This div is at the center
using Position
</p>
</div>
</body>
</html>
|
Output:
Position Properties for Horizontal Centering
Explanation:
We used position: absolute to position the <div> absolutely within its containing element and left: 50% places the left edge of the <div> at the horizontal center. At last the transform: translate(-50%) further centers the <div> by moving it back half of its width.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...