Выравнивание блока по центру
Для начала необходимо знать точный размер блока.
Затем, чтобы выровнять блок по центру экрана, надо определить для него следующие стили:
position:absolute;left:50%;margin-left:половина ширины выравниваемого блока
.

Пример первый:
<!doctype html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
#center{
  	width:200px;
	height:200px;
	background:#f00;
  	position:absolute;
	left:50%;
	top:50%;
	margin-left:-100px;
	margin-top:-100px
}
	
  /* 
  ширина 200 px, высота 200 px, фон,
  абсолютное позиционирование,
  подвинуть блок вправо на 50 %, 
  подвинуть блок вниз на 50 %, 
  отступ слева -100 px, отступ сверху -100 px  
  */
  
</style>
</head>
<body>
<div id="center">CENTER</div>
</body>
</html>


Для того, чтобы отцентрировать блок внутри контейнера, следует заменить CSS свойство «position:absolute» на «position:relative».


Пример второй:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Centering a DIV both Horizontally and Vertically in XHTML and CSS</title>
  	<style>
		/* Don't change this unless you have a validated reason or the comments tell you too */
		html, body {
			height: 100%;
			overflow: hidden;
		}
		#master-container {
			display: table; 
			height: 100%; 
			#position: relative; 
			overflow: hidden; 
			margin: 0px auto;
		}
		#center-holder {
			#position: absolute; 
			#top: 50%;
			display: table-cell; 
			vertical-align: middle;
		}
		#center-obj { /* This is the object you want to change */
			 #position: relative; /* But don't change this */
			 #top: -50%; /* Or this... */
			 margin: 0px auto; /* And if you like IE or have to cater to it... don't change this */
			 background: #000;
			 height: 500px;
			 width: 500px;
			 color: #fff;
		}
  	</style>
</head>
<body>
<div id="master-container">
	<div id="center-holder">

  		<div id="center-obj">
        	<!-- This where ye content be. -->
  		</div>
	</div>
</div>
</body>
</html>