How to align block elements to the center with CSS
How to Align Block Elements to the Center with CSS
The margin property in CSS can be used to horizontally center a block element (such as a div). We can set the width of the element to prevent the container from stretching. The block element takes up the entire line, forcing other elements to take up the next line because the block element owns 100% of its container.
Centering Block Elements
Any element that starts a new line on a webpage is considered a block-level element. For example, heading tags, divs, etc.
These block-level elements occupy the full width of the webpage. For example, if we have an element on our webpage that only takes up 10% of the page, if it were a block-level element, it would occupy 100% of the width.
We can change the display properties of any specific element by setting the value of the block property.
Syntax
Let’s look at the syntax of the display property —
display: value;
This is the syntax for the display property, which you can use to define the appearance of a specific element on a web page.
Margin Properties
Now that we know how block elements behave, we’ll use the margin property to align elements horizontally.
The margin property controls the position of block elements. We’ll use it in a way that will center the element, since margins control both the horizontal and vertical position of an element.
Syntax
Let’s look at the syntax of the margin attribute:
margin: value;
Here is the syntax for the margin property. Margins should be specified from both the left and right sides so that block elements are centered. The auto value can be used to set margins so that block elements are automatically aligned to the center.
Note – There is a property called text-align with a value of center. This property cannot be used with this method because it is used to center non-block elements such as paragraphs and span tags.
Example
To better understand the functionality of this property, let’s look at an example where we add some headings and a div with its margin set to auto in the CSS properties section, and then place them in a jar along with two inline-block elements. The different colors of the divs indicate the different display modes, such as inline-block and other.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of text alignment to the center</title>
<style> *{
background-color:black;
}
.para {
color:white;
text-align: center;
}
.testinline {
padding: 10px;
border: 2px solid blue;
}
h1 {
font-size: 35px;
color: white;
width: fit-content;
margin: auto;
}
.container {
background-color: lightblue;
margin: auto;
border: solid red 1px;
padding: 15px 10px;
text-align: center;
width: fit-content;
}
.good-night {
padding: 10px;
border: 2px solid blue;
color: white;
display: inline-block;
}
.good-morning {
padding: 10px;
text-align: center;
color: white;
}
</style>
</head>
<body>
<h1>Hi, this an example</h1>
<p class="para">We are aligning the block elements to the text.</p>
<h1>Welcome</h1>
<div class="container">
How is your day going
</div>
<div class="good-morning">
<div style="display: inline-block" class="testinline">
Good Morning
</div>
<div style="display: inline-block" class="testinline">
Good Night
</div>
</div>
</body>
</html>
In the above output, you can see that the heading and div elements are obscured along with the paragraph tags. We use the text-align property to center the paragraph tag and the margin property to align the block element, setting its value to auto.
Example
In the following program, we’ll take an image and a non-block element next to it. We’ll then set the image’s display to block and its margin to auto, align it with the heading, and set the paragraph’s display property to inline-block.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example for text alignment </title>
<style>
h1 {
margin: auto;
width: 30%;
font-size: 24px;
margin-bottom: 8px;
background-color: black;
color: white;
}
.image{
display: block;
margin: auto;
}
</style>
</head>
<body>
<h1>
Example for setting the block element
</h1>
<img class="image" src="https://www.tutorialspoint.com/https://coder-cafe.com/wp-content/uploads/2025/09/images/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png">
<p style="display: inline-block;">
Hi this is another Example for aligning the block element to the center.
</p>
</body>
</html>
In the output, you can see that the image is in the center and the text is on the next line, just as we wanted.
Conclusion
Centering block elements is a great way to create a balanced and symmetrical layout. By using text-align or margin auto values, you can quickly and easily align any number of elements in your design. With a little practice, you’ll be able to use these techniques with confidence!