north,south,east,west centered

by jpeter06

HTML

<div class="centered">
<div style="width:100%;height:100%;position:relative;">
	<div class="topC "><a class="roundAnchor fs">T</a></div>
	<div class="leftVC "><a class="roundAnchor fs centerUp">U</a></div>
	<div class="rightVC "><a class="roundAnchor fs centerUp">R</a></div>
	<div class="bottomC "><a class="roundAnchor fs">M</a></div>
</div>
</div>

CSS

.centered{
		width:300px;
		height:300px;
		background-color:red;
		margin-left:auto;
		margin-right:auto;
		margin-top: 100px;
	}
	
	.topC{
		text-align:center;
	}
	
	.bottomC{
		text-align: center;
		position: absolute;
		bottom: 0px;
		left: 0px;
		right: 0px;
	}
	
	.leftVC{
		position: absolute;
		top: 50%;
	}
	.rightVC{
		position: absolute;
		top: 50%;
		right: 0%;
	}
	
	.centerUp{
		bottom:42px;
	}
	
	.fs{

		background-color:yellow;
		display:inline-block;
		position:relative;
	}


.roundAnchor{
font-size:60px;
text-decoration: none;
  display: inline-block;
  background-color: #f7f7f7;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
  background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7); 
  background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7); 
  background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7); 
  background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7); 
  color: #a7a7a7;
  margin: 5px;
  width: 84px;
  height: 84px;
  position: relative;
  text-align: center;
  line-height: 94px;
  border-radius: 50%;
  box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
}	

.roundAnchor:hover{
  text-decoration: none;
  color: #555;
  background: #f5f5f5;
}