Click here to Skip to main content
Click here to Skip to main content
Go to top

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.

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. 1st Best Asp.Net article of SEP 2010
  2. 2nd Best Asp.Net article of MAY 2011
 
Read More Articles...
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralMy vote of 1 Pinmembersieunhantanbao11-May-14 15:06 
GeneralMy vote of 2 PinmemberAnh Tu Nguyen7-May-14 20:25 
GeneralMy vote of 1 PinprofessionalJB03014-May-14 15:38 
GeneralRe: My vote of 1 PinprofessionalSunasara Imdadhusen6-May-14 1:39 
QuestionTotal crap PinmvpFlorian Rappl3-May-14 23:59 
AnswerRe: Total crap PinprofessionalSunasara Imdadhusen6-May-14 1:41 
GeneralRe: Total crap PinmvpFlorian Rappl6-May-14 22:44 
GeneralRe: Total crap PinprofessionalSunasara Imdadhusen6-May-14 22:48 
QuestionLess code PinmemberGary Henning2-May-14 3:38 
AnswerRe: Less code PinprofessionalNitij2-May-14 6:54 
GeneralRe: Less code PinmemberGary Henning5-May-14 7:00 
GeneralRe: Less code PinprofessionalSunasara Imdadhusen6-May-14 1:55 
GeneralRe: Less code PinprofessionalNitij6-May-14 2:36 
QuestionFYI PinmemberWombaticus2-May-14 2:53 
AnswerRe: FYI PinprofessionalSunasara Imdadhusen2-May-14 2:57 
GeneralRe: FYI PinmvpFlorian Rappl4-May-14 0:07 
GeneralMy vote of 5 PinmemberHumayun Kabir Mamun1-May-14 21:58 
GeneralRe: My vote of 5 PinprofessionalSunasara Imdadhusen1-May-14 22:51 
GeneralNice tips PinmemberAsutosha1-May-14 8:01 
GeneralRe: Nice tips PinprofessionalSunasara Imdadhusen1-May-14 20:00 
GeneralMy vote of 4 PinmemberMahesh@Dev1-May-14 5:58 
GeneralRe: My vote of 4 PinprofessionalSunasara 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 | Mobile
Web02 | 2.8.140922.1 | Last Updated 2 May 2014
Article Copyright 2014 by Sunasara Imdadhusen
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid