절대 위치의div수평을 수직으로 가운데로 정렬하는 방법

어떻게 절대적으로 포지셔닝된div를 수직으로 가운데로 정렬합니까: 가능한 한 손으로 쓴 코드로 학습 효율과 깊이를 높일 수 있습니다.어떤 때는 절대적으로 포지셔닝된div를 부모 대상에서 수직으로 가운데로 정렬해야 할 수도 있습니다. 사용 빈도가 그리 높지 않을 수도 있지만 가끔 사용할 수도 있습니다. 다음은 이 기능을 어떻게 실현하는지 간단하게 소개하겠습니다.일반적인 경우, 원소에margin:0pxauto를 추가하면 원소를 부모 원소의 수평 가운데에 놓고 수직 가운데로 설정하면 됩니다.그러나 절대적인 포지셔닝 대상에margin:0pxauto를 추가하는 것은 효과가 없기 때문에 낡은 방법으로 실현해야 한다.코드의 예는 다음과 같습니다.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>    </title>  
<style type="text/css">  
.father  
{  
  width:600px;  
  height:600px;  
  background-color:green;  
  margin:0px auto;  
  position:relative;  
}  
.children  
{  
  position:absolute;  
  width:200px;  
  height:200px;  
  left:200px;  
  top:200px;  
  background-color:red;  
}  
</style>  
</head>  
<body>  
 <div class="father">  
  <div class="children"></div>  
 </div>  
</body>  
</html>

상기 코드는 자div를 부div에서 수평 수직 가운데로 정렬할 수 있다. 다음은 몇 가지 요점을 간단하게 소개한다.부모 요소는 상대적인 위치를 사용하는데, 이렇게 하면 요소를 위치 이동 참고 대상으로 삼을 수 있다.구체적으로 보면 4CSS의 절대 위치 지정2. top 속성 값 계산 방식: 부모 원소의 높이/2-자 원소의 높이/2, left 속성 값 계산 방식: 부모 원소의 너비 값/2-자 원소의 너비 값/2.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

수직 가운데 맞춤

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

절대 위치의div수평을 수직으로 가운데로 정렬하는 방법

좋은 웹페이지 즐겨찾기