Centering four divs w/relative positons on a page

hello all:
Could i please get some advice on how to center this four divs on a page please?
The three name sec & the sec graph.
Thank you


<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

<style>
body{
background:#B5B5B5;
margin:0px;
}
#wrap{
width:100%;
height:auto;
margin:0px;
}



#secContainer{
margin:0px auto;
padding:0px 5px;
}
.sec{
float:left;
width:15%;
height:auto;
position:relative;
padding:10px;
/* padding-right:25px; */
margin:20px;
border-radius:5px;
border-bottom:6px solid #ccc;
background:#DADADA;
}
.graph{
float: left;
width: 27%;
height: auto;
position: relative;
padding: 10px;
/* padding-right: 25px; */
margin: 20px;
border-radius: 5px;
border-bottom: 6px solid #ccc;
background: #DADADA;
}


.corners:before,
.corners:after{
content:'';
display:block;
right:0px;
top:0px;
position:absolute;
}

.corners:after{
border-top:20px solid transparent;
border-left:20px solid rgba(0,0,0,.05);
}
.corners:before{
border-bottom:20px solid transparent;
border-right:20px solid #B5B5B5;
}
<style>

</head>
<body>
<div id="wrap">


<div id="content">
	<div id="secContainer">
		<div class="sec corners">
		<h4>Temporibus autem </h4>
		<p>
		Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores
		</p>
		</div><!-- end sec1 -->
		<div class="sec corners">
		<h4>Itaque earum</h4>
		<p>
		Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores
		</p>


		</div><!-- end sec2 -->
		<div class="sec corners">
		<h4>Officiis Debitis</h4>
		<p>
		Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores
		</p>


		</div><!-- end sec3 -->
				<div class="sec graphs corners">
		<h4>Officiis Debitis</h4>
		<p>
		Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores
		</p>


		</div><!-- end sec4 -->

	</div><!-- end secContainer -->
</div><!-- end content -->
</div><!-- end wrap -->

</body>
</html>


try this:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

<style>
body{
margin:0 ;
padding:0;
 text-align:center;

}
body,html   {height:100%; background:#B5B5B5;}
body:before { content:'';   height:100%; display:inline-block; vertical-align:middle; width:1px; margin-left:-1px;  text-align:center;}
 
 #secContainer{
 text-align:left;
  width:60%;
 display:inline-block;
  padding-left:60px;
  vertical-align:middle;

}
.sec{
 float:left; 
margin-left:-60px;
width:25%;
height:auto;
position:relative;
 border-radius:5px;
border-bottom:6px solid #ccc;
background:#DADADA;
float:left;
}
.sec+.sec{
margin-left:20px;

}
.graph{
float: left;
width: 27%;
height: auto;
position: relative;
padding: 10px;
/* padding-right: 25px; */
margin: 20px;
border-radius: 5px;
border-bottom: 6px solid #ccc;
background: #DADADA;
}


.corners:before,
.corners:after{
content:'';
display:block;
right:0px;
top:0px;
position:absolute;
}

.corners:after{
border-top:20px solid transparent;
border-left:20px solid rgba(0,0,0,.05);
}
.corners:before{
border-bottom:20px solid transparent;
border-right:20px solid #B5B5B5;
}
</style>

</head>
<body>
 	<div id="secContainer">
		<div class="sec corners">
		<h4>Temporibus autem </h4>
		<p>
		Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores
		</p>
		</div><!-- end sec1 -->
		<div class="sec corners">
		<h4>Itaque earum</h4>
		<p>
		Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores
		</p>


		</div><!-- end sec2 -->
		<div class="sec corners">
		<h4>Officiis Debitis</h4>
		<p>
		Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores
		</p>


		</div><!-- end sec3 -->
				<div class="sec graphs corners">
		<h4>Officiis Debitis</h4>
		<p>
		Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores
		</p>


		</div><!-- end sec4 -->

	</div><!-- end secContainer -->
  
</body>
</html>

If you didn’t want vertical alignment (as shown in Dresden’s example above) then just remove the float and use display:inline-block instead and apply text-align:center on the parent to center the inline block elements just as you would with text…


#secContainer {
	margin:0px auto;
	padding:0px 5px;
[B]	text-align:center;[/B]
}
.sec {
[B]	display:inline-block;
	*display:inline;/* ie7 and under support*/
        *zoom:1.0;/* ie7 and under support*/[/B]
	vertical-align:top;
	width:15%;
	height:auto;
	position:relative;
	padding:10px;
	/* padding-right:25px; */
        margin:20px;
	border-radius:5px;
	border-bottom:6px solid #ccc;
	background:#DADADA;
}


Thank you both will go try both out.
D