How to Align div to the middle of page.

To align div to the middle of the screen or to align any element to the center of screen. you have to add following css to your stylesheet.

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

How it works ?

The CSS left property is based on the size of the parent element. The transform property is based on the size of the target element.
50% to the left moves element to the center of parent screen.
transform -50% moves the element back with respect to half of its own width.
So by this strategy above css align element to the center of screen.

Bhuvan Arora

Ripple Effect Using CSS

Here is the code for applying ripple effect on buttons. You just need to include ripple class to your button tag and have to paste the below code in your css file and that will work.

.ripple {
 position: relative;
 overflow: hidden;
 transform: translate3d(0, 0, 0);
}
.ripple:after {
 content: "";
 display: block;
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 pointer-events: none;
 background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
 background-repeat: no-repeat;
 background-position: 50%;
 transform: scale(10, 10);
 opacity: 0;
 transition: transform .5s, opacity 1s;
}
.ripple:active:after {
 transform: scale(0, 0);
 opacity: .3;
 transition: 0s;
}

Bhuvan Arora