CSS를 사용하여 절대 위치 요소를 수직 및 수평으로 중앙에 배치하는 방법

CSS를 사용하여 절대 위치 요소를 수직 및 수평으로 중앙에 배치하는 방법

 

절대 위치 요소는 문서 흐름에서 제거됩니다. 때로는 이러한 요소를 페이지 중앙에 올바르게 배치하는 방법을 아는 것이 혼란스러울 수 있습니다. 내 말은, CSS는 이미 혼란스럽습니다. 😂 이 기사에서는 컨테이너에서 절대 요소를 세로 또는 가로 또는 둘 다 가운데에 맞추는 방법을 보여줍니다.

코드 예

요소를 수평으로 중앙에 맞추려면:

element {
 position: absolute;
 left: 0;
 right: 0;
 margin: 0 auto;
}

요소를 세로로 가운데에 맞추려면:

element {
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto 0;
}

요소를 세로 및 가로로 가운데에 맞추려면:

 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 margin: auto;

 

그러나 내가 이러한 솔루션에 도달한 방법을 이해하려면 추가 설명을 읽으십시오.

절대 위치는 어떻게 작동합니까?

기본적으로 요소에는 static 다음과 같이 달리 지정되지 않는 한 위치 absolute, fixed, relative 또는 sticky. 차이점을 이해하려면 CSS 위치 스타일에 대한 이 기사를 읽을 수 있습니다. 다음 UI를 사용하여 absolute 요소 작동:

다음은 UI에 대한 코드입니다.

 

 

 

.container {
 margin: 20px;
#BBD0E0
»