divの中心を設定して固定します

Question

divを画面/親divの中心に設定して固定する方法は、幅を変更した後にその幅の変更を無視しますか？私はテーブルを含むdivを持っていますが、これは次のようになります： 外側のdivが必要かどうかはわかりません。私はテーブルを中央に置き、固定して、幅の変更を無視します。結果は次のようになります。 ご覧のとおり、サイズが変わったときにテーブルが左に動いてテーブルが中央に残っていれば、これを防止したいと思いますか？それは私のために働き、あなたは、テーブル内のそれらの代わりにヘルプテキストを使用することができ、

.main 
{ 
    position: relative; 
    width: 600px; 
    left: calc(50% - 300px); 
    border: 1px solid #000; 
} 
.table 
{ 
    margin: 0 auto; 
} 

<div class="main"> 
    <table class="table"> 
    <tr><td>Username: </td><td><input type="text"></td><td>ErrorMessage</td></tr> 
    <tr><td>Password: </td><td><input type="text"></td><td>ErrorMessage</td></tr> 
    </table> 
</div> 

Answer 1

がdiv内でこのスタイルを使用してみてください： これは私がこれまで持っているものです。

<div style="text-align:center"> 
    <input/><br/><input/><br/><button/> 
</div> 

Answer 2

.table からmargin: 0 auto;を削除し、このラインを `.table { 位置を入れ：相対。 左：45％;上から下に再配置されている場合があります

}

position:fixed; 

固定と再揃える他のdivに `

Answer 3

変更あなたの位置は右

Answer 4

左なぜ素人のためのテーブルの使用-でる？テーブルはデータ出力やHTMLメールに使用する必要があります（私が間違っていれば修正しますが、それは私が知っているものです）。あなたがエラーをしたいという事実について

position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%,-50%); 

：

また、あなたは、垂直方向と水平方向の中央に特定の要素を（これは絶対的であるが、これで遊ぶこと自由に感じなさい心に留めておく）。このコードを使用することができますフォームの幅に影響を与えないようにするメッセージ。ポジションアブソリュートを使ってアドバイスをします。

私はあなたのための例を書いていますhttps://jsfiddle.net/bdwte97g/ これが役立つことを願っています。