How to make a div center align in HTML?


DIV is called as a division tag, the name itself indicates that it makes divisions for the content on the web pages, <DIV> tag separates the data on web pages, the data like text, images, navigation bar etc., By using DIV tag we can also create particular sections.

DIV tag consists of open and close tags <DIV> </DIV>, both open and close tags are compulsory if we want to divide the page.

By using class or id attributes DIV tags can be easily styled by using CSS or can be manipulated with JavaScript. Any sort of data can be placed inside the <div> tag.

Example

Following is the example of the <DIV> tag −

<html>
<head>
   <title>How to Represent Div Tags in HTML5</title>
   <style type=text/css>
      p {
         font-size: 15px;
         margin: 8px;
      }
      div {
         color: black;
         margin: 4px;
         font-size: 15px;
      }
   </style>
</head>
   <body>
      <p><b>HTML tutorial</b></p>
      <div>Introduction</div>
      <div>Forms</div>
      <div>Media Elements </div>
   </body>
</html>

When we execute the above program, a webpage containing div elements with text within it, will be displayed, and the text color would be black as specified.

DIV center align in HTML

Following is the usage of DIV center align −

To align a div element into the center, we use −

"div style="text-align:center" " 

To center the div, we can use the syntax as shown below −

"div style="margin: 0 auto" " 

Example

Following is the example of the <DIV> center align tag −

<html>
<head>
   <title>How to Represent Div Tags in HTML5</title>
   <style type=text/css>
      p {
         font-size: 15px;
         margin: 8px;
      }
      div {
         color: black;
         margin: 4px;
         font-size: 15px;
      }
   </style>
</head>
   <body>
      <div style="text-align:center; width: 300px;margin: 0 auto; border- style: dotted;">
         <p>Welcome to TutorialsPoint</p>
      </div>
   </body>
</html>

When we execute the above program, a div element will be displayed along with a <p> element within it, with specified text in the code.

Now let us see the different variations on alignment of center a DIV

Center a DIV with CSS Margin Auto

The shorthand margin property using the value 0 auto to center block-level elements just like a div horizontally −

Example

Following is the example of the <DIV> center align tag with CSS Margin Auto −

<html>
<head>
   <title>TutorialsPoint</title>
   <style type=text/css>
      .container {
         font-family: arial;
         font-size: 14px;
         margin: 25px;
         width: 350px;
         height: 200px;
         outline: dashed 1px black;
      }
      .child {
         width: 50px;
         height: 50px;
         background-color: blue;
         /* Center horizontally*/
         margin: 0 auto;
      }
   </style>
</head>
<body>
   <div class="container">
      <p><b>Center a Div with CSS Margin Auto</b></p>
      <div class="child"></div>
   </div>
</body>
</html>

When we run the above program, a div element is displayed which is formatted to center with CSS auto margin.

Center a DIV Both Vertically and Horizontally

To Center DIV both vertically and horizontally, we need to know the width and height of the element that we want to center.

Steps

  • For parent element, set the position property to relative.

  • Set child's position property to absolute, top to 50%, and left to 50%. It centers the top left corner of the child element vertically and horizontally.

  • Apply negative top margin set to half the child element's height, and a negative left margin set to half the child element's width.

Example

Following is the example of the <DIV> Center both vertically and horizontally −

<html>
<head>
   <title>TutorialsPoint</title>
   <style type=text/css>
      .container {
         font-family: arial;
         font-size: 14px;
         margin: 25px;
         width: 350px;
         height: 200px;
         outline: dashed 1px black;
         position: relative;
      }
      .child {
         width: 50px;
         height: 50px;
         background-color: green;
         /* Center horizontally and vertically*/
         margin: -25px 0 0 -25px ;
         position: absolute;
         top: 50%;
         left: 50%;
      }
   </style>
</head>
   <body>
      <div class="container">
         <p><b>Center Both Vertically and Horizontally</b></p>
         <div class="child"></div>
      </div>
   </body>
</html>

When we run the above program, a div element and a child div element will be displayed, which is formatted to center.

Updated on: 04-Oct-2023

10K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements