by: KSPosted on:

How display div horizontally center ?

In this post we will learn how to display div horizontally center by using CSS below are the details.

  • Create one div
  • Add class name as “h-center“
  • Add below mentioned css to “h-center” class
  • Here margin and width properties are required to display <div> horizontally center on the page.
.h-center {
  margin: auto;
  width: 50%;
  border: 1px solid #CCCCCC;
  padding: 10px;
}
  • width property is also required if width property is not set then <div> will not be displayed horizontally center.
  • The <div> will take the 50% width and remaining width will be distributed equally.