Center Div in CSS Horizontally

Except in IE6, this is a bug. 

You can fix the width of the block using margin: 0 auto

    #block_div{
        margin: 0 auto;
        width: 200px;
        border: 1px solid red;
    }

    <div id="block_div">center a div using css</div>

To center div in CSS Horizontally, Just use text-align property with value center property

Suppose this is your HTML ELement

    <div class="container">
      <p>This text needs to center Horizontally</p>
    </div>
    <style>
      .container {
            font-size: 25px;
            width: 450px;
            margin: 35px;
            height: 200px;
            font-family: arial;
            outline: dashed 2px black;
      }
    </style>

         p {
             /* To Center horizontally*/
              text-align: center;
          }

To center an element horizontally with Flexbox, just apply justify-content: center and display: flex  to the parent element:

    <div class="container">
      <div class="child_class"></div>
    </div>

    .container {
          margin: 35px;
          width: 450px;
          font-family: arial;
          font-size: 25px;
          height: 300px;
          outline: dashed 1px black;
          justify-content: center;
          display: flex;
    }

    .child_class {
        height: 50px;
        width: 50px;  
        background-color: green;
    }

To center a <div> horizontally, you can use the following CSS properties:

.center-div {
  margin: 0 auto; /* This centers the div horizontally */
}

Margin: 0 auto;: This sets the top and bottom margins to 0 and the left and right margins to "auto", which effectively centers the <div> horizontally within its containing element.

Then, apply the center-div class to the <div> you want to center:

<div class="center-div">
  <!-- Content goes here -->
</div>
 

.parent-div {
  display: flex;
  justify-content: center;
}

Can do it by

1|   .div{

margin: 0 auto;

} 

2|  .div{

display : flex;

justify-content : center

}

.parent-div{

display: flex;

justify-content: center

}