How to align block elements to center using CSS ?

12 Aug, 2021
The “blocks” are known for taking full line space, forcing other elements to start on a new line. In other words, they have a width of 100% of the webpage or container holding the block.  In this article, we are going to see how to block elements that usually behave and how to center them using CSS.
Block Elements Behaviour: Any element can be set to behave like a block by setting their display property to the block “display: block”. There are some other elements like headers, div tags which are by default block. So they take the full line or full width of the web page or container holding it. Even if our content is taking 20% of the width of the webpage still the block property will reserve the full 100% width of the web page or container holding it.
How to center these block elements: We have seen that how this block element behaves, we observe that as they take full line width, to center them we only have the margin property that is controlling them horizontally.
The margin can control the position of the block element both horizontally and vertically. To center them, we can adjust the margin property such that it is placed in the center.
Note: We can see that the “text-align : center” is not centering the block elements. They are only centering the non-block or inline-block elements.
Center block elements using margin property: We need to specify the margin from left and right such that it looks centered. We do not need to do this manually, we have one property value “auto” which will automatically set the margin such that our block element is placed in the center. Use the below CSS property to center your block element.
margin: auto
Example 1:
HTML
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content=        "width=device-width, initial-scale=1.0" />      <style>        h2,        p {            text-align: center;        }                  .myblock {            margin: auto;            border: 2px solid red;            width: fit-content;            padding: 15px;            text-align: center;            background-color: lightyellow;        }                  header {            font-size: 40px;            background-color: lightgreen;            margin: auto;            width: fit-content;        }                  .myinline {            padding: 10px;            border: 2px solid blue;        }                  .holder {            text-align: center;        }    </style></head>  <body>    <h2>Welcome To GFG</h2>    <p>Default code has been loaded into the Editor.</p>      <header>hello</header>      <div class="myblock">        div who has default display : block    </div>          <div class="holder">        <div style="display: inline-block" class="myinline">            inline block paragraph 1        </div>              <div style="display: inline-block" class="myinline">            inline block paragraph 2        </div>    </div></body>  </html>
Output:
centered block
Example 2: We have one image that has some space around it, so by default the non-block element will come next to the img tag and not on the next line. After setting the “display: block” property, we can make our image to block element. It can be centered using “margin: auto” property.
Note: The body tag has been set to the “text-align: center” property. We know that it is not affecting the block elements.
HTML
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <style>        header {            font-size: 20px;            margin: auto;            width: 30%;            background-color: lightgreen;            margin-bottom: 10px;        }                  p {            display: inline-block;        }                  img {            display: block;            margin: auto;        }    </style></head>  <body>    <header>        centering image using display: block    </header>      <img src="https://media.geeksforgeeks.org/wp-content/uploads/20210810104012/geeksimage.png"        alt="image here" width="500" height="400" />      <p>        paragraph came to the new line even         if it is inline, because the img is         set to block    </p></body>  </html>
Output:
CSS-Properties
CSS-Questions
HTML-Questions
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Form validation using jQuery
Design a web page using HTML and CSS
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
HTTP headers | Content-Type