Vertically centering a div inside another div [duplicate]

Answer 1

If you still didn't understand after reading the marvellous answers given above.

Here are two simple examples of how you can achieve it.

Using display: table-cell

.wrapper {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  display: inline-block;
  text-align: left;
  padding: 20px;
  border: 1px solid #cd0000;
}

  

    Center align a div using "display: table-cell"
  

Using flex-box (display: flex)

.wrapper {
  display: flex;
  justify-content: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  align-self: center;
  padding: 20px;
  border: 1px solid #cd0000;
}

    

        Centering a div using "display: flex"
    

Note: Check the browser compatibility of display: table-cell and flex before using the above mentioned implementations.