How to center a div on a page vertically and horizontally

I often need to do center a div, here is a css code on how to center a div inside a div or body

CSS

.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

HTML

<body>
<div class="box">centered content</div>
</body>

Reference: stackoverflow.com