Align Element in Center

Align element in centre position of the screen using only CSS

Horizontal alignment is very easy on the screen. But some times alignment in vertical is very difficult

Horizontal alignment

To align an element horizontally best approach is using margin

 margin: 0 auto;

Vertical alignment

To align an element vertically we can use this approach

  transform: translateY(-50%);
  position: relative;
  top: 50vh; 

There is one another approach to center it using CSS3 flex property

 // on the parent element we just need to apply flex properties
  height: some height;
  display: flex;
  justify-content: center;
  align-items: center;

You can check on codepen: Codepen

If you have any other approach please share.