Centering a div within a larger div

The post will explain methods in which a div of smaller width and height can be vertically and horizontally centered within a div of larger width and height.

Trick 1 : Format larger div as a table cell.

This trick is a CSS2 trick, the idea is to format the outer div as a table cell which allows us to vertically center the content because the contents of a table cell can be vertically aligned. Check the implementation here.

Trick 2 : Using the transform property.

This trick is a CSS3 trick, which is based on the idea of positioning the larger (outer) div relatively and the smaller ( inner ) div absolutely. Check the implementation here.

The inner element (div) is positioned 50% from top top: 50%; positioned 50% from the left left: 50%; (and then using the transform property transform: translate(-50%, -50%); it is moved up 50% its height and moved left 50% its width.

PS: I have not found a straight forward solution to vertically align a div within another div. More tricks to be added as found.