css - center the content in a div

Question

I have 4 divs in my .html:

<div id="div"> 
     <div class="contenido">1</div>
</div>
<div id="divSupIzq"> 
     <div class="contenidos"><div id="textoDinamico">120 </div><div id="textoEstatico">KM/H</div></div>
</div>
    <div id="divSupDer"> 
    <div class="contenidos">zona de</br>avisos</div>
    </div>
<div id="divInfIzq"> 
    <div class="contenidos">zona de</br>informaci&oacute;n</div>
</div>

In .css, I've applied border-radius in order to give these divs circular form. I've applied text-align:center because I want the content of each div being centered But how to center the content in the height?? I give some margin-top in .css, but it's wrong, because the interface is adaptable to the size screens (responsible design - css queries) and margin-top isn't sufficient for me... I don't know if I'm explaining myself well...I try that yes. Sorry for my bad english. Regards, Daniel

Live example: http://jsfiddle.net/cN2pS/ Another question: what tools do you use in order to test these type of apps for differents resolutions?

Answer 1

使用表格并为每个 td 中心设置对齐

<table>
  <tr>
     <td align="center">
        Your text or elements
     </td>
  </tr>
</table>

或者设置div显示为table-cell