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

    MaterializeCSS - Mobile Collapse menu not showing when clicked

    CSS Grow on hover adds padding to the bottom of an image, how do I stop this from happening?

    how to use both fixed and relative position property in same page using css?

    How can I place the text in this box like this with CSS?

    How to write inline CSS to web2py view

    How to keep images locked at specific height within Bootstrap container

    How to “mark” a UL/LI nav item as “active” based on click?

    How can I change GWT's widget CSS values?

    How do I add a “popup” shadow to an HTML element

    How do i make the header/footer extend width-wise to fit the screen, and the main content extend height-wise to fit the screen?

    How to develop Javascript and CSS and use minified versions when releasing?

    How to change text color of a css class?

    How to edit a div inside PHP using CSS

    How to remove style type css wordpress from header?

    How do I avoid using !important?

    How can I use :hover with multiple classes

    How to regex rotate properties from transform value

    Howto get html popup inside svg at correct position (using javascript)

    how can I set my gradient background in css for full width and height of the page?

    How to distribute cell height evenly within a row spanning two cells vertically?

    ASP.Net MVC: How to use razor variable in CSS file

    How to delete space in css?

    How to get css background color on tag to span entire row

    How to remove an invisible space between div tags

    Manual JavaScript Slideshow with Dynamic images

    how to create arrow down/up in css

    CSS Div with background image - how to allow for expansion of div on page?

    How to vertically center a child element of arbitrary size inside a floated parent element (of known size)?

    How to add font to a web page

    How do I change the last textual node child in JavaScript