Atribut kedudukan tetap dalam CSS melaksanakan kemahiran centering_javascript div

Atribut kedudukan menentukan jenis kedudukan elemen. Atribut ini mentakrifkan mekanisme kedudukan yang digunakan untuk mewujudkan susun atur elemen. Mana-mana elemen boleh diletakkan, tetapi elemen mutlak atau tetap menjana kotak peringkat blok, tanpa mengira jenis elemen itu sendiri. Elemen yang agak kedudukannya diimbangi daripada kedudukan lalainya dalam aliran biasa.

Atas, bawah, kiri, kanan, tengah

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

Jika anda hanya perlu memusatkan kiri dan kanan, kemudian padamkan bahagian bawah:0 atau atas:

Jika anda hanya perlu memusatkan bahagian atas dan bawah, kemudian gunakan kiri:0 atau kanan:

Dilampirkan di bawah ialah elemen DIV yang berpusat pada tetingkap penyemak imbas

Sebenarnya, ia tidak rumit untuk mencapai kesan ini. Ia boleh dicapai dengan mudah dengan menggunakan kedudukan kedudukan dalam CSS. Mari lihat kod:

<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>

Semua petua persediaan ada di sini:

.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;
}

Tetapkan kedudukan: tetap; _kedudukan:mutlak;
Set kiri:50% dan atas:50%;
Tetapkan margin: -(DIV's offsetWidth/2) 0 0 -(DIV's offsetHeight/2)

Perenderan

Kandungan di atas ialah keseluruhan perihalan atribut kedudukan tetap dalam CSS untuk mencapai pemusatan div yang dikongsi oleh editor.