Box Flat style

Vorrei creare un div quadrato colorato e quando gli passo sopra con il mouse aumenta le sue dimensioni.
Io ho fatto così:

Codice HTML:

---

<div class=quadrato></div>

---

CSS:

Codice:

---

.quadrato
{
width:100px;
height:100px;
background-color:#CF000F;
transition:all 1s;
transition-timing-function: ease;
cursor:pointer;
}
.quadrato:hover
{
width:130px;
height:130px;
background-color:#CF000F;
cursor:pointer;
}

---

Il problema che l'ingrandimento parte dal vertice in alto a sinistra ovvero sul lato sinistro e superiore rimane fissato ed aumenta i lati destro ed inferiore.
Come potrei fare ad effettuare l'ingrandimento a partire dal centro del div ovvero applicarlo su tutti i lati?

prova con

Codice:

---

.quadrato:hover
{
width:160px;
height:160px;
background-color:#CF000F;
cursor:pointer;
margin-top:-30px;
margin-left:-30px;
}

---