Se você está trabalhando com uma imagem <img>
pode utilizar o vertical-align:middle
, porém nesse caso precisa se atentar ao line-height
do elemento que contém a imagem, ele deve ter o mesmo tamanho do elemento.
*Para imagens
HTML
<div id="container">
<img src="http://a.disquscdn.com/next/7b3d8738/assets/img/noavatar92.png" alt="avatar disqus">
</div>
CSS
#container{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background: #f00;
}
#container img{
vertical-align: middle;
}
*Método com conhecimento do height
Se você tem a possibilidade de definir um height
para esse elemento pode fazer utilizando o código citado num artigo da Smashing Magazine
HTML
<div>
magix!
</div>
CSS
div{
background: red;
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 100px;
}
Solução em JavaScript com jQuery
Agora se seu foco é um outro elemento você pode usar jQuery, usando lógica você irá deixar a distância do seu elemento com 50% das bordas, depois controlar o margin
.