Como dynicamlly centralizar o centro de um div com base no tamanho da tela - javascript, css

Eu realmente pensei que isso seria simples, mas estouperdendo minha cabeça! Eu simplesmente quero centralizar um div no div da tela. Mas não a parte superior esquerda da div no centro da tela, mas o centro da div no centro.

Aqui está meu 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>

Obrigado! Não consegui descobrir como colocar o html ao lado de um bloco de código. Este é o centro horizontal e verticalmente.

Respostas:

Use a posição: absoluta se precisar centralizada tanto horizontal quanto verticalmente:

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

http://jsfiddle.net/wcFMw/

Para centralizar horizontalmente:

margin:auto;

Para centrar verticalmente:

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

Você também pode usar position: fixed para centralizar o div mesmo ao rolar a página.

Observe também que você terá que usar # ao invés de . para selecionar por identidade. . é o seletor CSS usado para classe.

JsFiddle

margin:0 auto;

Adicione esta propriedade à sua classe css.