Vertically centering a set of elements

I am trying to center vertically some anchors but have not been able to mange it, the anchors are inside a div which is centered horizontally and taking up all the height of the body, what I want is have these anchors centered within that div


<body>
<div id="teatro_intimo_botones">
	<a class="contacto" href="#"></a>
	<a class="quienes_somos" href="#"></a>
	<a class="obras" href="#"></a>
	<a class="proximos_eventos" href="#"></a>
</div>
</body>


body {
    background-color: #080000;
    margin: 0;
    padding: 0;
}
#teatro_intimo_botones {
    margin-left: auto;
    margin-right: auto;
    width: 362px;
}
#teatro_intimo_botones a {
    display: block;
    height: 131px;
    width: 181px;
    float: left;
}
.contacto {
    background-image: url("contacto.png");
}
.quienes_somos {
    background-image: url("quienes_somos.png");
}
.obras {
    background-image: url("obras.png");
}
.proximos_eventos {
    background-image: url("proximos_eventos.png");
}

I tried using a percentage, but then it will not show properly on all screens, is there a way to center those vertically?

Have you tried using the clear style? I tried that and it stacked them vertically.

yes it does stack them vertically, but I do not want them stacked vertically, basically what I am trying to achieve is have 2 on each row, I now managed to get it working somewhat but I am not really convinced because if the screen is too small then the content gets cut off

here is what I have done so far but as I mentioned in the previous post the content gets cut off when the screen does not have enough space, also it is not really centered


<body>
	<div id="teatro_intimo_botones">
		<div id="vert">
			<a class="contacto" href="#"></a>
			<a class="empty" href="#"></a>
			<a class="quienes_somos" href="#"></a>
			<br/>
			<a class="empty" href="#"></a>
			<a class="obras" href="#"></a>
			<a class="empty" href="#"></a>
			<br/>
			<a class="proximos_eventos" href="#"></a>
		</div>
	</div>
</body>


body {
    background-color: #080000;
    margin: 0;
    padding: 0;
}
#teatro_intimo_botones {
    margin-left: auto;
    margin-right: auto;
    width: 543px;
}
#teatro_intimo_botones a {
    display: block;
    height: 131px;
    width: 181px;
    float: left;
}
#vert {
	position:absolute;
	top:50%;
	margin-top:-197px;
}
.contacto {
    background-image: url("contacto.png");
}
.quienes_somos {
    background-image: url("quienes_somos.png");
}
.obras {
    background-image: url("obras.png");
}
.proximos_eventos {
    background-image: url("proximos_eventos.png");
}

well, I decided to change the whole thing, I created a table and was able to center that on the screen, here is what I did


<body>
<div id="teatro_intimo_botones">
<div id="vert">
<table>
	<tr>
		<td><a href="#"><img src="contacto.png" /></a></td>
		<td></td>
		<td><a href="#"><img src="quienes_somos.png" /></a></td>
	</tr>
	<tr>
		<td></td>
		<td><a href="#"><img src="obras.png" /></a></td>
		<td></td>
	</tr>
	<tr>
		<td><a href="#"><img src="proximos_eventos.png" /></a></td>
	</tr>
	</table>
</div>
</div>
</body>


body {
    background-color: #080000;
    margin: 0;
    padding: 0;
}
#teatro_intimo_botones {
    margin-left: auto;
    margin-right: auto;
    width: 557px;
}
#vert {
	position:absolute;
	top:50%;
	margin-top:-211px;
}
#vert table tr td {
    height: 131px;
    width: 181px;
}

if anyone knows a better way to do it please let me know

Hi,

If its just a block of 4 fixed height images the you can do it like this and it won;t slide off the screen like your table version.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal and vertical centerl</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body {
	height:100%;
	margin:0;
	padding:0;
}
body { text-align:center; }
#vertical {
	float:left;
	height:50%;
	margin-top:-133px;/* half vertical height*/
	width:100%;
}
#hoz {
	width:366px;
	margin:0 auto;
	padding:0;
	list-style:none;
	height:266px;
	overflow:auto;/* allow content to scroll inside element if needed */
	text-align:center;
	clear:both;
}
#hoz a {
	height: 131px;
	width: 181px;
	float: left;
	border:1px solid #000;
	background:red;
	line-height:131px;/* not needed  - just for effect*/
}
</style>
</head>
<body>
<div id="vertical"></div>
<ul id="hoz">
		<li><a class="contacto" href="#">1</a> </li>
		<li><a class="quienes_somos" href="#">2</a></li>
		<li><a class="obras" href="#">3</a></li>
		<li><a class="proximos_eventos" href="#">4</a></li>
</ul>
</body>
</html>