Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to align block elements to the center?
The margin property in CSS can be used to center a block element like a div horizontally. By setting the left and right margins to auto and defining a specific width, block elements can be centered within their container.
Syntax
selector {
margin: auto;
width: value;
}
Understanding Block Elements
Block elements naturally take the full width of their container and start on a new line. Common block elements include <div>, <h1>, <p>, and <section>. To center these elements, we need to give them a specific width and use margin: auto.
Note: The text-align: center property only centers inline content within block elements, not the block elements themselves.
Method 1: Using Margin Auto
The most common method is setting the left and right margins to auto while defining a width
<!DOCTYPE html>
<html>
<head>
<style>
.centered-block {
width: 300px;
margin: 0 auto;
background-color: lightblue;
padding: 20px;
border: 2px solid navy;
text-align: center;
}
.centered-heading {
width: fit-content;
margin: 0 auto;
background-color: darkgreen;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="centered-heading">Centered Heading</h2>
<div class="centered-block">
This div is centered horizontally using margin: auto
</div>
</body>
</html>
A centered green heading and a centered blue div box appear in the middle of the page, both horizontally aligned.
Method 2: Using Flexbox on Parent
You can also center block elements by applying flexbox to the parent container
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
justify-content: center;
gap: 20px;
margin: 20px 0;
}
.block-item {
width: 150px;
height: 100px;
background-color: coral;
border: 2px solid red;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="block-item">Block 1</div>
<div class="block-item">Block 2</div>
</div>
</body>
</html>
Two coral-colored rectangular blocks labeled "Block 1" and "Block 2" appear centered horizontally on the page with space between them.
Example: Centering Images as Block Elements
Images can be centered by setting their display to block and using margin auto
<!DOCTYPE html>
<html>
<head>
<style>
.centered-image {
display: block;
margin: 20px auto;
border: 3px solid purple;
border-radius: 10px;
}
.centered-text {
width: 400px;
margin: 0 auto;
text-align: center;
background-color: #f0f0f0;
padding: 15px;
border-radius: 8px;
}
</style>
</head>
<body>
<img src="/css/images/logo.png" alt="Logo" class="centered-image">
<div class="centered-text">
This text block is centered using margin: auto with a defined width.
</div>
</body>
</html>
A centered image with purple border and a centered gray text box appear vertically stacked and horizontally centered on the page.
Conclusion
Centering block elements is achieved by setting margin: auto with a defined width, or using flexbox on the parent container. The margin: auto method is the most widely supported and commonly used approach for horizontal centering.
5K+ Views
