How to make DIV center of the screen using pure HTML and CSS

Introduction

This is simple tricks which allows you to make your DIV (which are either Modal Dialog, Popup, Notification, IFrame etc.) on center of the screen without using jQuery or JavaScript. This is purely used HTML and CSS.

Using this code it will make your Div center of the screen Horizontally and Vertically.

Using the code

Following are the Style (CSS):

<style type="text/css">
.dialog-background{
    background: none repeat scroll 0 0 rgba(255, 0, 25, 0.5);
    height: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 100;
}
.dialog-loading-wrapper {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    height: 100px;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    position: fixed;
    top: 50%;
    width: 100px;
    z-index: 9999999;
}
.dialog-loading-icon {
    background-color: #FFFFFF !important;
    border-radius: 13px;
    display: block;
    height: 100px;
    line-height: 100px;
    margin: 0;
    padding: 1px;
    text-align: center;
    width: 100px;
}
    </style>

Following are the HTML:

<div class="dialog-background">
    <div class="dialog-loading-wrapper">
        <span class="dialog-loading-icon">Loading....</span>
    </div>
</div>