I can’t line up a box in the center?

Question

I’m trying to align the box in the center of the screen, but it looks like it’s lining up wrong even if I put 50% of top and 50% of left.

css

#conteudo{
    position:fixed;
    top:50%;
    left:50%;
    border:2px #ccc solid;
    width:350px;
    height:auto;
}
#conteudo table tr td input[type=text],
#conteudo table tr td input[type=password]
{
    width:100%;
}
#conteudo table tr td {
 text-align:right;   
}

html

<div id="conteudo">
    <table border='0' width='100%' cellspacing='20'>
        <tr>
            <td><input type='text' name='email' placeholder='Digite o email'></td>
        </tr>
        <tr>
            <td><input type='password' name='senha' placeholder='Digite a senha'></td>
        </tr>
         <tr>
            <td><input type='submit' name='entrar' value="Entrar"></td>
        </tr>
    </table>    
</div>

Example in jsfiddle

Answer 1

CSS does not use the center of the object as a reference for positioning, but rather the ends, so what will be in the center after this code will be the upper left corner of the object.

To position in the center set width and height with absolute sizes and a negative margin with half this size, example:

#conteudo {
      width:350px; // largura fixa
      height:180px; // altura fixa
      margin-top:-90px; // margem top com metade da altura
      margin-left:-175px; // margem left com metade da altura
      border:2px #ccc solid;
      position:absolute;
      top:50%;
      left:50%;
}

Example: Jsfiddle