How to display a div over other content and in the center of webpage using CSS?


Tags: css

Problem :

How do I display a div over other content of webpage? This div must be centered vertically and horizontally as in this example:

enter image description here

I tried this:

<div style = "position: absolute; top: 50%; left: 50%;">DIV content</div>

In this example only the left corner is centered and not div itself.



Solution :

The following should work.

div{
    position:fixed;
    width:500px;
    height:600px;
    margin:-300px auto auto -250px;
    top:50%;
    left:50%;
    text-align:center;
}

The -300 pixels and -250 pixels are the negative half of the height/width of the div respectively.

There may be a better way of doing this, but this is a method I used a while back.


    CSS Howto..

    how to center perfectly image and text inline in the center of page

    How to fit a div container to cover all the remaining space in between?

    How to create cube with only HTML and CSS?

    How to create an integrated row in the table?

    How to put html input text into an image using CSS?

    How to show the scaled image and text in the view port without scrollbar?

    jQuery select box Show/hide div

    How do I give one stylesheet precedence over the other with Rails?

    How to make carousel have a max width, and load without resize

    How can I make list item spacing more acceptable in html/css email for all viewers?

    How to write specific CSS for mozilla, chrome and IE

    How do I set the height of an iframe with the min-height property in the body?

    How to modify your CSS working with Mobile Angular UI and Bootstrap

    How can I use CSS to code a 3-sided box (no left side) with rounded corners and a shadow?

    How to make video thumbnails like Facebook [CSS]

    How to target an element under an other element?

    how to remove css property “element{}” [closed]

    How to overwrite Twitter Bootstrap navbar-inner class

    how to set height of a 'td' inside a array in javascript using CSS

    How to cycle odd and even when using ajax append?

    How to distribute p:menuitems in p:menubar accordingly?

    how to select margin for a background image in CSS/CSS3?

    how to give margin between li using css?

    How to get a style property from a css class and set it to another css class?

    How do I keep my exiting CSS from compiled LESS

    CSS: how to center a list with image

    How to achieve Expand collapse Side Nav with icon using jquery and boostrap css

    How can I add background color to CSS triangles?

    Using two buttons on one div, how do you fade in slowly then fade out?

    How to make div box actually touching the side of the browser as mine has a gap?