Make HTML element align to center using CSS

To make your website look attractive, you may need to make an HTML element align to the center. There are many ways to do this, I pointed out here a few productive ways.

Different ways to align HTML element to center

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>

Result:

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; 
}

Result:

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; 
}

Result:

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;
}

Result:

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;
}

Result:

You should use display: table instead ofwidth if 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.