Hi Readers!

We are usually using multiple divs inside a div. For the purpose of increasing interactiveness in the web page, we may want to align the inner divs properly, maybe horizontally or vertically. 

Like in the following case :

<div id="outer" style="width:100%">  
  <div id="inner">Inner Div</div>
</div>

How do we do it?

I am providing the solution below. In my opinion, this is the best all-around method to do so, that is tested and worked.

We just have to include the following three lines of CSS :

1. position: relative;
2. top: 50%;
3. transform: translateY(-50%);

Below is a sample code snippet :

HTML :

As above

CSS :

div.outer {
  height: 200px;
  width: 300px;
  background-color: lightgray;
}

div.inner {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

OUTPUT :

Keep Coding!