How to style HTML element align to center using CSS?

To make the responsive design you may need to make an HTML element position center. There are many ways to do this.

html element align to center

Different ways to align HTML element to center

Method 1: Do it both horizontally and vertically by positioning
Method 2: Make element center without defining the inner size
Method 3: Do it by using flex
Method 4: Make it by using the transform property
Method 5: Make align only one direction

Method 1: Do it both horizontally and vertically by positioning

The following method will make the element center both horizontally and vertically. You have to define precise height and width. Please don’t forget to add max-width and max-height

.outer {
    float:left; 
    margin:5px;  
    height: 200px;
    width: 200px; 
    position: relative; 
    border:1px solid red;
}
.inner {
    max-height: 100%;
    max-width: 100%;
    width: 40%;
    height: 50%;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border:1px solid red;
}
<div class="outer">
<div class="inner">Centre element</div> 
</div>

Method 2: Make element center without defining the inner size

Another way to make both horizontally and vertically center without defining inner height and width. But you can make it horizontal or vertical way by defining height or width.

.outer {
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  display: box;
  box-pack: center;
  box-align: center;
  border:1px solid blue;
  height:200px;
  width:200px;
}
.inner {
  border:1px solid blue; 
}

Method 3: Do it by using flex

You can also do it by using flex. Follow the example below. 

.outer {
  height:200px;
  width:200px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border:1px solid red;
}
.inner {
  border:1px solid blue; 
}

Method 4: Make it by using the transform property

Transform property can be a great way to move elements to the center. 

.outer {
  height:200px;
  width:200px;
  position: relative;
  border:1px solid blue;
}
.inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%,-50%); 
  -moz-transform: translate(-50%,-50%); 
  -ms-transform: translate(-50%,-50%); 
  -khtml-transform: translate(-50%,-50%); 
  -o-transform: translate(-50%,-50%);
  border:1px solid blue;
}

Method 5: Make align only one direction 

If you want to center element only horizontal way, then use the following code. You can do it in a vertical way just by altering the height and width value to oppose. 

.outer {
  width: 200px;
  height:200px;
  border:1px solid blue;
}
.inner {
  max-height:100%;
  max-width:100%;
  width: 60%;
  height:100%;
  margin: 0 auto; /*It makes the actual centering.*/
  border:1px solid blue;
}

You should use display: table it instead widthif you don't want to use specific width.

To make it work well on all browsers, you should have to use the !DOCTYPE tag on your HTML pages. You may add a vendor prefix to support a particular browser.