Can not align a box in the center? [duplicate]

Navigation
-1

I'm trying to align the box in the center of the screen, but it looks like it's lining up wrong even though 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

    
asked by anonymous 17.04.2014 / 01:58

1 answer

2

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 is the upper left corner of the object.

To position in the center, set width and height with absolute sizes and a negative border with half this size, for 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

    
17.04.2014 / 02:14
Bad Operand types for binary operator Commit transaction only if all EJBs succeed