How to Center Block Elements with CSS
How to Center Block Elements with CSS
Positioning your elements, such as buttons, content boxes, text, and https://coder-cafe.com/wp-content/uploads/2025/09/images, is what alignment is all about. In web design, aligning anything means lining up the parts correctly in a row or line. In some web design strategies, alignment is intentionally broken to create asymmetrical designs. In others, all components are aligned in some way.
The layout of a web page is largely dictated by the placement of elements. A good-looking website is one with strategically placed and well-organized elements. The CSS position property will make this process much easier for you. It helps create a variety of website layouts. If the various sections are properly aligned, your website will be easier to read. Proper alignment of objects and information has a significant impact on the overall appearance of your website. The careful arrangement of your website elements, including text blocks and photo placeholders, exudes an air of professionalism and is aesthetically pleasing and tranquil.
An important component of responsive design is the arrangement of items on your website. This is because when a website is loaded on a device with a smaller screen size, such as a smartphone, its appearance and structure will change to suit your intent. In this article, we will discuss how to use CSS to align block elements.
What are Block Elements?
Block elements are elements that appear at the beginning of a new line. Block elements occupy the entire width of their contained content. Unlike inline elements, these elements have top and bottom margins. Only the body tag is allowed to contain block-level components. Compared to inline components, block-level elements create a larger structure. Examples of block elements include <div>, , <section>, <li>, <ul>, <form>, <p>, etc.
Example
<!DOCTYPE html>
<html>
<head>
<title> Block Elements </title>
<style> *{
margin: 11px;
padding: 5px;
letter-spacing: 1px;
}
h1{
color: green;
text-decoration: underline;
}
div{
background-color: #FFFF00;
width: 30%;
}
p{
background-color: #FF0000;
width: 30%;
}
article{
background-color: #00FF00;
width: 30%;
}
section{
background-color: blue;
width: 30%;
}
</style>
</head>
<body>
<h2> Block Elements </h2>
<div> This is a div element. </div>
<p> This is a p element. </p>
This is an article element. </article>
<section> This is a section element. </section>
</body>
</html>
Methods for Centrally Aligning Block-Level Elements
The following discusses several methods for centrally aligning block elements.
Method 1
Manually specify the width of the element. This is because the default width of a block element is 100% of the entire screen. Then, specify margins to align the remaining space around the block element.
Example
<!DOCTYPE html>
<html>
<head>
<title> Alignment of Block elements </title>
<style>
*{
margin: 11px;
padding: 5px;
box-sizing: border-box;
}
body {
background: cyan;
}
.container {
background: #000000;
color: #FFFFFF;
text-align: center;
width: 350px;
margin: 10rem auto;
}
</style>
</head>
<body>
<h1> Tutorialspoint </h1>
<h2> Block Elements </h2>
<div class= "container">
<h3> This is a div element which is centrally aligned. </h3>
</div>
</body>
</html>
Example
<!DOCTYPE html>
<html>
<head>
<title> Alignment of Block elements </title>
<style>
*{
margin: 11px;
padding: 2px;
box-sizing: border-box;
}
body {
background: #FFFF00;
}
.box {
background: #040220;
color: rgb(238, 238, 238);
text-align: center;
width: 480px;
height: 30px;
margin: 10px auto;
}
</style>
</head>
<body>
<h1> Tutorialspoint </h1>
<h2> Block Elements </h2>
<div class= "box">
<h3> This is an example. </h3>
</div>
<div class= "box">
<h3> This is an example. </h3>
</div>
</body>
</html>
Method 2
To center block elements, we can simply use the <center> tag. All elements within the <center> tag will be centered.
Example
<!DOCTYPE html>
<html>
<head>
<title> Alignment of Block elements </title>
<style>
*{
margin: 11px;
padding: 5px;
box-sizing: border-box;
}
body {
background: cyan;
}
.container {
background: #000000;
color: #FFFFFF;
text-align: center;
width: 60%;
}
</style>
</head>
<body>
<h1> Tutorialspoint </h1>
<h2> Block Elements </h2>
<h2> div element </h2> <center>
<div class= "container">
<h3> This is a div element which is centrally aligned. </h3>
</div>
</center>
<h2> section element </h2>
<center>
<div class= "container">
<h3> This is a section element which is centrally aligned. </h3>
</div>
</center>
</body>
</html>
Conclusion
User experience greatly benefits from simple web design. If people have a good experience when visiting your website, they are more likely to engage with you. When information is clean, it’s easier to read and discover. If your page is difficult to understand, people will visit your competitors’ websites. You want your website visitors to take action once they’re there, not leave. In this article, we’ve discussed two methods for centrally aligning block-level elements. One way is to specify the outer width and margins of the element, while another way is to create a block element within the <center> tags.