CSS의 고정 위치 속성은 div centering_javascript 기술을 구현합니다.

위치 속성은 요소의 위치 지정 유형을 지정합니다. 이 속성은 요소의 레이아웃을 설정하는 데 사용되는 위치 지정 메커니즘을 정의합니다. 모든 요소를 ​​배치할 수 있지만 절대 또는 고정 요소는 요소 자체의 유형에 관계없이 블록 수준 상자를 생성합니다. 상대적으로 배치된 요소는 일반 흐름의 기본 위치에서 오프셋됩니다.

위, 아래, 왼쪽, 오른쪽, 중앙

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

왼쪽 및 오른쪽 센터링만 필요한 경우 하단:0 또는 상단: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;
}

위치 설정: 고정; _위치:절대;

왼쪽:50%, 위쪽:50%로 설정;
여백 설정: -(DIV의 offsetWidth/2) 0 0 -(DIV의 offsetHeight/2)

렌더링

위 내용은 div 센터링을 달성하기 위한 CSS의 고정 위치 속성에 대한 전체 설명입니다. 편집자가 공유해 주시기 바랍니다.