How to dynicamlly center the center of a div based on screen size


Tags: javascript,css

Problem :

I really thought this would be simple but i'm losing my mind! I just simple want to center a div in the div of the screen. But not that top left of the div to the center of the screen but the center of the div in the center.

Here is my div css

.box
{
    padding-top:20px;
    padding-left:5px;
    background-color: #ffffff;
    background-color: rgba(221,221,221,0.5);
    border: 1px solid black;
    border-radius: 25px;
    filter: alpha(opacity=90);
    height: 125px;
    width: 250px;
    z-index: 1;
}

<form id="form1" runat="server">
<div id="box"><div>
</form>

Thanks! I couldnt figure out how to get the html to side in a code block. This is center horizontally and vertically.



Solution :

Use position:absolute if you need it centred both horizontally and vertically:

#box {
    position:absolute; 
    top:0; left:0; right:0; bottom:0; 
    margin:auto;
    /* etc */
}

http://jsfiddle.net/wcFMw/


    CSS Howto..

    How to force input type text within span width

    How to show a message box on center of screen?

    How should I do this in CSS?

    How to auto adjust margin to Auto center vertical & horizontal using jQuery and CSS margin

    Show all text document

    How would can i keep horizontal divs (3 in a row) with margins inbetween them inline with wrapper?

    How to apply css for anchor tag inside table

    How to select inner div in an unordered list

    how to change height of ellipse in radial gradient in css for background property

    How to edit menu in header - wordpress

    How to disable temporary cursor with javascript?

    How to make commandeButon to vertical align?

    How to Get CSS/JavaScript Pop-Up to Transition In

    Child div's evenly spaced and flushed to side of parent: how to?

    How to put an image at the left side of text without putting the image into css

    How to refer to an anchor pane in css?

    How to output CSS counter from Sass mixin

    Give a box an ID, once clicked shows alert of that ID?

    How to write Hover property with CSS for a piece wih :after and :before properties?

    How to select ids which contain special characters?

    CSS how to transition(with transform) a parent and child both, differently

    How to make a transparent border using CSS?

    How to bounce to top with button on image with CSS

    How can I center an image with text that follows it using CSS?

    How to use multiple CSS locators as a selenium locator?

    CSS: How to position two elements on top of each other, without specifying a height?

    Show Link on image at hovering in jquery

    How to add css 3dtransform property with jquery to a dom element?

    In html how do I have table within table look visually the same as if I didnt have the inner table

    How to install CSS templates with Flask?