Ako dynicamlly centrum centra div na základe veľkosti obrazovky - javascript, css

Naozaj som si myslel, že to bude jednoduché, ale somstrácam rozum! Jednoducho chcem vycentrovať div na div obrazovky. Nie však tá ľavá horná časť divu do stredu obrazovky, ale stred divu v strede.

Tu je môj 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>

Vďaka! Nemohol som prísť na to, ako dostať html na stranu v bloku kódu. Toto je stred horizontálne a vertikálne.

odpovede:

Použite pozíciu: absolútna, ak ju potrebujete vycentrovať horizontálne aj vertikálne:

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

http://jsfiddle.net/wcFMw/

Vycentrovať vodorovne:

margin:auto;

Vycentrovať zvisle:

position: absolute;
top: 0; left: 0; bottom: 0; right: 0;

Môžete tiež použiť position: fixed aby bol div vycentrovaný aj pri rolovaní stránky.

Tiež si uvedomte, že budete musieť použiť # namiesto . vybrať podľa id. . je selektor CSS používaný pre trieda.

JsFiddle

margin:0 auto;

Pridajte túto vlastnosť do svojej triedy css.