Click here to Skip to main content
13,197,211 members (59,765 online)
Click here to Skip to main content
Add your own
alternative version


16 bookmarked
Posted 1 May 2014

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

, 2 May 2014
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.


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">
    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;

Following are the HTML:

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


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


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


  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...

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    Praise Praise    Rant Rant    Admin Admin   

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

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