Box Flat style

[SchoolCommunity]

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

<div class=quadrato></div>

CSS:

.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

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