Nur Rony
Polyglot Programmer. Blindly love JS. An automation freak who love to cook code in React, Redux, RxJS and serve them using Docker. Married to the most beautiful girl.

Easiest Way to make a div horizontally and vertically centered

Easiest Way to make a div horizontally and vertically centered

Sometimes for us silly problem make us wet with sweat. Centering div from both horizontally and vertically may be one of them. I found a sweet and easy way to make a div centered. I think, it is the most easiest way. Here it is ..


<!DOCTYPE html>  
<html>  
  <head>
    <meta charset="utf-8">
    <title>Centering DIV</title>
  </head>
  <body>
    <div></div>
  </body>
</html>

The CSS part us really cool

div {  
  background: green;
  bottom: 0;
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
}

I will explain later why this works. But need to take a nap for now.