Existem vários truques para exibir o conteúdo ou uma imagem no centro de uma div. Algumas das respostas são realmente legais e também concordo plenamente com elas.
Centralização horizontal e vertical absoluta em CSS
http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/
Existem mais de 10 técnicas com exemplos . Agora cabe a você o que você preferir.
Sem dúvida, display:table; display:table-Cell
é um truque melhor.
Alguns bons truques são os seguintes:
Truque 1 - usando display:table; display:table-cell
HTML
<div class="Center-Container is-Table">
<div class="Table-Cell">
<div class="Center-Block">
CONTENT
</div>
</div>
</div>
Código CSS
.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
display: table-cell;
vertical-align: middle;
}
.is-Table .Center-Block {
width: 50%;
margin: 0 auto;
}
Truque 2 - Usando display:inline-block
HTML
<div class="Center-Container is-Inline">
<div class="Center-Block">
CONTENT
</div>
</div>
Código CSS
.Center-Container.is-Inline {
text-align: center;
overflow: auto;
}
.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
display: inline-block;
vertical-align: middle;
}
.Center-Container.is-Inline:after {
content: '';
height: 100%;
margin-left: -0.25em; /* To offset spacing. May vary by font */
}
.is-Inline .Center-Block {
max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
/* max-width: calc(100% - 0.25em) /* Only for Internet Explorer 9+ */
}
Truque 3 - Usando position:relative;position:absolute
<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
<div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
<h4>ABSOLUTE CENTER, <br/>
WITHIN CONTAINER.</h4>
<p>This box is absolutely centered, horizontally and vertically, within its container</p>
</div>
</div>