Click here to Skip to main content
11,716,285 members (90,503 online)
Click here to Skip to main content

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

, 2 May 2014 CPOL 30.6K 16
Rate this:
Please Sign up or sign in to vote.
This is simple tricks which allows you to make your DIV on center of the screen without using Javascript.

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> 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Sunasara Imdadhusen
Software Developer (Senior) Infostretch Ahmedabad-Gujarat
India India
Aspiring for a challenging carrier wherein I can learn, grow, expand and share my existing knowledge in meaningful and coherent way.

sunaSaRa Imdadhusen

AWARDS:
  1. 2nd Best Mobile Article of January 2015
  2. 3rd Best Web Dev Article of May 2014
  3. 2nd Best Asp.Net article of MAY 2011
  4. 1st Best Asp.Net article of SEP 2010

Read More Articles...

You may also be interested in...

Comments and Discussions

 
QuestionShow/Hide Pin
Member 111861556-Aug-15 22:59
memberMember 111861556-Aug-15 22:59 
GeneralMy vote of 1 Pin
sieunhantanbao11-May-14 15:06
membersieunhantanbao11-May-14 15:06 
GeneralMy vote of 2 Pin
Anh Tu Nguyen7-May-14 20:25
memberAnh Tu Nguyen7-May-14 20:25 
GeneralMy vote of 1 Pin
JB03014-May-14 15:38
professionalJB03014-May-14 15:38 
GeneralRe: My vote of 1 Pin
Sunasara Imdadhusen6-May-14 1:39
professionalSunasara Imdadhusen6-May-14 1:39 
QuestionTotal crap Pin
Florian Rappl3-May-14 23:59
mvpFlorian Rappl3-May-14 23:59 
AnswerRe: Total crap Pin
Sunasara Imdadhusen6-May-14 1:41
professionalSunasara Imdadhusen6-May-14 1:41 
GeneralRe: Total crap Pin
Florian Rappl6-May-14 22:44
mvpFlorian Rappl6-May-14 22:44 
GeneralRe: Total crap Pin
Sunasara Imdadhusen6-May-14 22:48
professionalSunasara Imdadhusen6-May-14 22:48 
QuestionLess code Pin
Gary Henning2-May-14 3:38
memberGary Henning2-May-14 3:38 
AnswerRe: Less code Pin
Nitij2-May-14 6:54
professionalNitij2-May-14 6:54 
GeneralRe: Less code Pin
Gary Henning5-May-14 7:00
memberGary Henning5-May-14 7:00 
GeneralRe: Less code Pin
Sunasara Imdadhusen6-May-14 1:55
professionalSunasara Imdadhusen6-May-14 1:55 
GeneralRe: Less code Pin
Nitij6-May-14 2:36
professionalNitij6-May-14 2:36 
QuestionFYI Pin
Wombaticus2-May-14 2:53
memberWombaticus2-May-14 2:53 
AnswerRe: FYI Pin
Sunasara Imdadhusen2-May-14 2:57
professionalSunasara Imdadhusen2-May-14 2:57 
GeneralRe: FYI Pin
Florian Rappl4-May-14 0:07
mvpFlorian Rappl4-May-14 0:07 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun1-May-14 21:58
memberHumayun Kabir Mamun1-May-14 21:58 
GeneralRe: My vote of 5 Pin
Sunasara Imdadhusen1-May-14 22:51
professionalSunasara Imdadhusen1-May-14 22:51 
GeneralNice tips Pin
Asutosha1-May-14 8:01
memberAsutosha1-May-14 8:01 
GeneralRe: Nice tips Pin
Sunasara Imdadhusen1-May-14 20:00
professionalSunasara Imdadhusen1-May-14 20:00 
GeneralMy vote of 4 Pin
Mahesh@Dev1-May-14 5:58
memberMahesh@Dev1-May-14 5:58 
GeneralRe: My vote of 4 Pin
Sunasara Imdadhusen1-May-14 19:37
professionalSunasara Imdadhusen1-May-14 19:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150901.1 | Last Updated 2 May 2014
Article Copyright 2014 by Sunasara Imdadhusen
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid