:::: MENU ::::

Five CSS techniques that make overlay div centered.

To create simple overlays without help of any help of readymade jQuery plugin or third-party library we need to use CSS to achieve that.

Steps to make overlay with CSS

  1. Create <div> node and make it absolute to DOM (document object model)
  2. Assign it property top and left = 0.
  3. Apply width and height 100%
  4. Finally set z-index > 0

So <div> will overlay entire document. Now let’s make div centered different way.

Method 1:- Making overlay div center with css top, right, bottom and left property.

HTML

CSS

Above method will set div position 50px from all corner and margin auto will make this div centered.

Demo –

 

Method 2: Making overlay div with css margins.

HTML

CSS

Above method will set overlay <div> to top,left =0 position and then set it’s margin auto.

Demo:-

Method 3:- relative div inside absolute div

HTML

CSS

In above example there are two nested <div>.  The parent one is absolute to DOM while child <div> is relative to it. So, parent is made 50% left to the viewport first. Then half of the child div’s wide is taken as offset to move it right. i.e. left:-50%

Demo –

 

Method 4:- absolute div inside relative div

HTML

CSS

In above example there are two nested <div>.  The parent one is relative to DOM and set it to top,left = 0. Child <div> is absolute to it. It’s set to 50% left to document and then shifted right to half of its width.

Demo: – 

 

Method 5:- lightbox overlay div

To make above code practical, let’s change absolute and relative order and add one semi transparent background.

Demo:-


2 Comments

  • Reply Sourav Basak |

    For creating a new arrival for future ahead the HTML and CSS techniques are the hottest web design techniques for your next web design. There are some common techniques in responsive web design. For more UI patterns and techniques, this quality content is really good for Web Design Trends and enough for beginners, I guess.
    Thanks a lot.

So, what do you think ?

  •