#centerwindow {
  border:1px solid red;
  background:#FCFCFF;
  position:absolute;
  top:50%;
  left:50%;
  text-align:center;
}

แบบที่ 1 อันนี้เหมาะกับกรอบที่ไม่รู้ขนาดครับ property สำคัญคือ position top และ left ครับ เป็นการกำหนดตำแหน่ง แต่แบบนี้มีข้อเสีย ที่การแสดงผลอาจไม่กลางวินโดวส์นัก

#centerwindow {
  border:1px solid green;
  background:#FCFCFF;
  position:absolute;
  top:50%;
  left:50%;
  width:100px;
  height:100px;
  margin-left:-50px;
  margin-top:-50px;
  text-align:center;
}

แบบที่ 2 มีการกำหนดขนาดที่แน่นอน รวมถึงมีการกำหนด margin-left และ margin-top ด้วย ซึ่งค่าของ margin ทั้งสองจะมีค่าเป็นครึ่งหนึ่งของ width และ height ที่กำหนดไว้ และต้องติดลบ ครับ ซึ่งจะทำให้กรอบอยู่กลางวินโดวส์พอดี

<div id="centerwindow">กรอบนี้อยู่กลางจอภาพเสมอ</div>

ตัวอย่าง