div+css ページ レイアウト中心_html/css_WEB-ITnose

ページ全体の上部と下部を中央揃えにしたい場合は、それらを全体にする必要があります。本文の 2 つの部分が 1 つの全体に含まれるように、6c04bd5ca3fcae76e30b72ad730ca86d タグにクラスを追加しました。次に、全体の 298b6fcf29074d60dd041d02d2dcb730 を設定します:

.mainLayout {    position :absolute;    left : 50%;    top : 50%;    width : 910px;    margin-top : -270px;    margin-left : -455px;}

これは、絶対位置と負のマージン値を使用して実現されます。

left:50% を指定すると、メインレイアウト コンテナ全体がブラウザの水平方向の中点から右に表示されます。このとき、ブラウザの左半分は空になります。

次に、margin-left を mainlayout コンテナの半分に設定します。これを負の値に設定すると、コンテナが左に移動します。つまり、コンテナ全体がブラウザの中央から半分だけ左に移動します。メインレイアウトコンテナ)。このようにして、メインレイアウトコンテナを左右中央に表示することができます。

中央表示の原理は同じです: 最初の上: コンテナを垂直方向の中点から下に 50% 表示し、上のスペースの半分を残します。次に、メインレイアウト コンテナの半分を上に移動して、垂直方向の中央に配置します。

元のリンク: http://my.oschina.net/suyewanwan/blog/110784