The margin: auto is used to distribute the space automatically with equal spaces on both the left and the right sides of the elements, and it centers the text horizontally. It works well for block-level elements such as <div>, <p>, <section>, and other elements with a defined width.
This method makes the code look simple and clean because it doesn’t need positioning elements like Flexbox and the grid. Since the elements are centered horizontally, it gets adjusted to the different screen sizes for all the devices.
What is margin: auto in CSS?
The CSS margin: auto property automatically centers the element horizontally inside the container. This property works when the element has a fixed height and the right and left margins are set to auto. The browser will calculate the space evenly for centering the element.
How Does margin: auto Horizontally Center an Element?
The margin: auto property can be used for horizontally centering an element. It can be done by having an element with a fixed width and applying the margin: auto property to it. This makes the left and right margins get automatically adjusted equally for centering the elements.
Example 1: Centering the Div Using margin: auto
Create the div element to center it horizontally. Using margin: auto, you can place the div inside the parent container. And so, the inner div is horizontally centered within the outer div.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of Margin Auto</title>
<style>
.box{
width: 100%;
Background-color: pink;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.center {
width: 55%;
margin: auto;
background-color: orange;
padding: 25px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div class="center">
Element Centered Using margin: auto.
</div>
</div>
</body>
</html>
Output:
Explanation: The code centers the div horizontally. The .box is used to center the div, and the .center class styles the content and has margin: auto for centering the element inside the parent element.
Beginner-Friendly Courses to Learn Web Development
Online Web Development Courses That Get You Job-Ready
Example 2: Centering the Paragraph Text Using margin: auto
You can center the paragraph element horizontally. The margin: auto is used for centering, and display: flex is used for alignment.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Paragraph with Margin Auto</title>
<style>
.container {
width: 100%;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}
.centered-text {
width: 50%;
margin: auto;
background-color: white;
padding: 25px;
text-align: center;
font-size: 16px;
border: 1px solid whitesmoke;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<p class="centered-text">This is a paragraph that is horizontally centered using margin: auto. It is wrapped in a container and styled with padding, background color, and a border.</p>
</div>
</body>
</html>
Output:
Explanation: The paragraph is set to 60%, and the margin: auto property is used for centering the element. For centering the text, you can use text-align: center.
The header is centered using the margin: auto and followed by adding some CSS properties for styling it.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Header with Margin Auto</title>
<style>
.container {
width: 100%;
height: 100vh;
background-color: black;
display: block;
}
header {
width: 55%;
margin: auto;
background-color: white;
padding: 15px;
text-align: center;
font-size: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<header>This is a header that is horizontally centered using margin: auto.</header>
</div>
</body>
</html>
Output:
Explanation: The equal space on both sides can be provided by the margin: auto.
Get 100% Hike!
Master Most in Demand Skills Now!
Conclusion
Block-level elements like <div>, <p>, and <section> are used in this method for centering the elements. You can also find that these codes look simple since they don’t have any other positioning elements. You can use the above code for centering the div and paragraph horizontally so that you can get a well-structured webpage.
Alternative Methods to Horizontally Center the Element
- Using Grid
- Using Flexbox
- Using position: absolute
- Using text-align: center, text-align: left, and text-align: right
- Using float: right and float: left
- Using margin: 0 auto
- Using the display: table method
These articles guide you through the essential elements and structure of HTML.-
Bootstrap Interview Questions – Examine key Bootstrap interview questions discussed in this blog.
What Does Enctypemultipart Form Data Mean In An Html Form – This blog outlines what enctype=”multipart/form-data” means and how it works in HTML forms.
How To Vertically Align Text Next To An Image Using Css – Get step-by-step instructions on vertically aligning text next to images using CSS in this blog.
Regex To Match Open Html Tags Except Self Contained Xhtml Tags – This blog shows how to build regex that targets open HTML tags while skipping self-contained ones.
Why Margin Top Does Not Work In Css – Learn from this blog why margin-top might fail and how to fix it in your CSS layout.
How To Copy Array By Value In Javascript – This blog explains different methods to copy arrays by value in JavaScript.
Css Display Table Method To Center The Element Horizontally – Read how the display: table CSS method can be used to center elements horizontally in this blog.
Using Onclick In Html A Bad Practice – Uncover reasons why using onclick in HTML may not be best practice, as explained in this blog.
Parsing Html Xml With Regular Expressions – This blog dives into the complexity of parsing HTML and XML with regular expressions.
Html Links – Learn how to effectively create and structure HTML links with the help of this blog.