[DOM_Style] JS - position 속성 - 위치기준대상지정 (= 위치속성 = 포지션속성 = position속성, 상속 X, IE7) ※ 화면 정중앙 배치/정렬

position 예제

 

<style> 

#hz {

  border: 1px solid silver;

  background-color: tomato;

  width: 300px;

  height: 200px;

  position: relative;

  top: 20px;

}

</style>

<button onclick="homzzang()">클릭t</button>

<div id="hz">

  <p>홈짱닷컴 Homzzang.com</p>

</div>

<script>

function homzzang() {

  document.getElementById("hz").style.position = "absolute";

}

</script>

 

position 예제 - 화면 정중앙 배치/정렬

 

<style>
div {width:200px; border:1px solid red;}

</div>

 

<div>홈짱닷컴 Homzzang.com</div>

 

<script> 

var div = document.getElementsByTagName('div');

div[0].style.position = 'absolute';

div[0].style.left = '50%';

div[0].style.top = '50%';

div[0].style.transform = "translate(-50%, -50%)";

</script>

 

결과보기