CSS の固定位置属性は div centering_javascript スキルを実装します

position 属性は、要素の配置タイプを指定します。この属性は、要素のレイアウトを確立するために使用される位置決めメカニズムを定義します。任意の要素を配置できますが、絶対要素または固定要素は、要素自体のタイプに関係なく、ブロック レベルのボックスを生成します。相対的に配置された要素は、通常のフローではデフォルトの位置からオフセットされます。

上、下、左、右、中央

div{
  position:fixed;
  margin:auto;
  left:0;
  right:0;
  top:0;
  bottom:0;
  width:200px;
  height:150px;
}

左右の中央揃えが必要な場合は、bottom:0 または top:0 を削除します。

上下を中央に配置するだけの場合は、left:0 または right:0 を使用します。

以下に添付されているのは、ブラウザ ウィンドウの中央に配置された DIV 要素です

実際、この効果を実現するのは複雑ではありません。CSS で位置を指定することで簡単に実現できます。コードを見てみましょう:

<style type="text/css">
.dialog{
 position: fixed;
 _position:absolute;
 z-index:1;
 top: 50%;
 left: 50%;
 margin: -141px 0 0 -201px;
 width: 400px;
 height:280px;
 border:1px solid #CCC;
 line-height: 280px;
 text-align:center;
 font-size: 14px;
 background-color:#F4F4F4;
 overflow:hidden;
} 
</style>
<div class="dialog">我是在窗口正中央的，呵呵！</div>

セットアップのヒントはすべてここにあります:

.dialog{
 position: fixed;
 _position:absolute; /* hack for IE6 */
 z-index:1;
 top: 50%;
 left: 50%;
 margin: -141px 0 0 -201px;
 width: 400px;
 height:280px;
 border:1px solid #CCC;
 line-height: 280px;
 text-align:center;
 font-size: 14px;
 background-color:#F4F4F4;
 overflow:hidden;
}

位置の設定: _position:absolute;

左:50%、上:50% を設定します。

マージンの設定: -(DIV の offsetWidth/2) 0 0 -(DIV の offsetHeight/2)

レンダリング

上記の内容は、エディターで共有される div センタリングを実現するための CSS の固定位置属性の説明全体です。