Salve, sto creando un sito per mobile, ho la necessità di creare 4 box centrati a centro dello schermo su due righe, io ho fatto una cosa del genere:

codice:
<!doctype html><html>
<head>
<meta charset="utf-8">
<style>
#contenitore{
	width:100%;
	height:600px;
	color:#FFF;
	text-align: center;
}
.box-info{
	width: 45%;
	height: 45%;
	float: left;
	margin-left: 10px;
	margin-top: 10px;
}
.box-title{
	width: 100%;
	height: 25%;
	background: rgba(0, 0, 0, 0.1);
}
.box-body{
	width: 100%;
	height: 50%;
	padding-top: 15px;
	font-size: 38px
}
.box-footer{
	width: 100%;
	height: 25%;
}
.red{ background-color: #e74c3c;}
.giallo{ background-color: #f39c12;}
.azzurro{ background-color: #00c0ef;}
.verde{ background-color: #00a65a;}
</style>
</head>


<body>


<div id="contenitore">


	<div class="box-info red">
    	<div class="box-title">Titolo</div>
        <div class="box-body">Contenuto 1</div>
        <div class="box-footer">Footer</div>
    </div>
    
    <div class="box-info giallo">
    	<div class="box-title">Titolo</div>
        <div class="box-body">Contenuto 2</div>
        <div class="box-footer">Footer</div>
    </div>
    
    <div class="box-info azzurro">
    	<div class="box-title">Titolo</div>
        <div class="box-body">Contenuto 3</div>
        <div class="box-footer">Footer</div>
    </div>
    
    <div class="box-info verde">
    	<div class="box-title">Titolo</div>
        <div class="box-body">Contenuto 4</div>
        <div class="box-footer">Footer</div>
    </div>
</div>


</body>
</html>
Ma il problema e che non usano dimensioni fisse ma in % non riesco a centrare il tutto, quindi il tutto risulta posizionato sulla sinistra. Potete darmi un consiglio

Grazie.