ページの中央を表示するためにビューポートを作成するにはどうすればよいですか？

Question

私は本当に応答性のないWebページを持っていますが、私はそれを電話で少なくとも友好的にしています。参照：http://maguss.org

私の現在のビューポートは、次のとおりです。<meta name="viewport" content="width=500, initial-scale=1">

それはかなりOK探していますが、ビュー全体がページの左側にあります。私はそれを中心にしたいと思います。

ここをブラウズしていたが、何の答えも見つかりませんでした。

Answer 1

理想的には、次に

<meta name="viewport" content="width=device-width, initial-scale=1"> 

ページの動作を変更するために、メディアクエリを使用し、次のように幅がデバイス幅もさせてください。あなたのスタイルの上部に

Answer 2

は、これを追加します。

html, 
body { 
    width:100%; 
    height: 100%; 
    position: relative; 
} 

次は、このルールセットを見つける：へ

.main{ 
    height:100%; 
    width:100%; 
    top: 0; 
    left: 0; 
} 

が変更に：

.main{ 
    height:100vh; 
    width:100vw; 
    position:relative; // or absolute; you need to test it. 
    top: 0; 
    left: 0; 
}