CSS를 사용하여 절대 Div 중앙에 배치
- CSS를 사용하는 중심 요소
-
absolute속성을 사용하여 요소를 수평으로 중앙에 배치 -
absolute속성을 사용하여 요소를 수직으로 중앙에 배치 -
absolute속성을 사용하여 요소를 수평 및 수직으로 중앙에 배치 - 결론
CSS(Cascading Style Sheets)는 HTML 요소의 스타일을 정의하고 다양한 장치 및 화면 크기에 맞게 표시되는 방식을 정의하는 데 사용됩니다. CSS를 사용하면 한 번에 여러 페이지의 레이아웃을 제어할 수 있으므로 많은 작업을 절약할 수 있습니다.
absolute 속성을 사용하여 div 클래스 내의 요소를 중앙에 배치하는 방법을 살펴보겠습니다.
CSS를 사용하는 중심 요소
텍스트, 이미지, 상자 또는 요소 그룹을 중앙에 배치하려면 세로 및 가로로 배치해야 합니다. 수평 및 수직 포지셔닝으로 센터링이 간단해 보이지만 따라야 할 단계는 다소 까다롭습니다.
text-align: center;를 사용할 수 있습니다. 인라인 및 margin: 0 auto; 사용 블록 요소를 사용하여 요소를 수평으로 중앙에 배치합니다. CSS에서 absolute 속성을 사용하여 하나의 요소 또는 요소 그룹을 수직, 수평 또는 수직 및 수평으로 중앙에 배치할 수도 있습니다.
절대 속성 사용
요소가 존재할 위치를 지정하지 않으면 기본적으로 정적으로 유지됩니다. top, left, right 및 bottom 속성은 여기서 작동하지 않습니다.
따라서 static의 HTML 요소는 위치 지정되지 않으며 마크업 언어에 있는 그대로 나타납니다. 그러나 absolute 속성을 사용하면 요소가 없는 것처럼 배치되고 동작합니다.
absolute 배치 요소의 공간은 그것에서 제거되어 다른 요소에 할당되는 반면 absolute 배치 요소는 자체적으로 공간을 차지합니다.
HTML 코드가 아래와 같다고 가정해 봅시다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Center an Absolute div</title>
</head>
<body>
<div class="container">
<div class="green-box"></div>
<div class="blue-box"></div>
</div>
</body>
</html>
위의 코드 스니펫에서와 같이 문서 유형이 html이고 처음에 <html>과 <head>를 모두 열었다고 언급했습니다. 그런 다음 다른 문자에 대한 액세스를 가능하게 하는 메타 문자 집합을 정의합니다.
그런 다음 style이라는 CSS 파일이 href를 사용하여 현재 HTML 파일과 연결되고 <title> 내에 제목 Center an Absolute div가 표시됩니다. 다음으로 <head>를 닫은 후 <body>를 한 번 열어야 합니다.
<body>에서 container라는 div 클래스가 열리고 green-box 및 blue-box가 두 개 더 생성됩니다. 마지막 부분에서 <div>, <body> 및 <html> 태그는 닫는 시퀀스입니다.
style.css 코드:
.container {
margin: 50px;
display: flex;
border: 4px solid green;
padding: 50px;
width: 400px;
}
.orange-box,.purple-box {
width: 100px;
height: 100px;
}
.orange-box {
background-color: orange;
}
.purple-box {
background-color: purple;
}
위의 코드 스니펫은 style.css 내부의 코드입니다.
처음에는 속성이 정의된 녹색 테두리가 있는 컨테이너를 만들었습니다. 다음으로 너비와 높이가 100px인 주황색과 보라색의 상자 두 개를 만들었습니다.
출력:
style.css 파일의 상자 내부에 있는 속성을 사용자 지정하여 가로, 세로 또는 가로 및 세로 모두 중앙에 배치할 수 있습니다.
명확한 아이디어를 얻기 위해 보라색 상자만 사용자 지정해 보겠습니다. 요소를 중앙에 배치하기 위해 아래 언급된 사용 사례에 따라 위의 코드를 수정할 수 있습니다.
absolute 속성을 사용하여 요소를 수평으로 중앙에 배치
예제 코드:
.purple-box {
background-color: purple;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
출력:
위 스니펫에 따르면 absolute 속성을 사용하여 자주색 상자를 배치했지만 left 및 right 값은 0입니다. 또한 top 및 bottom 여백은 0이고 둘 다 왼쪽 및 오른쪽 여백은 자동입니다.
따라서 개체의 너비에 대해 자동 여백을 사용합니다.
출력에서 볼 수 있듯이 자주색 상자는 absolute 위치 속성을 사용하여 수평 중앙에 배치됩니다.
absolute 속성을 사용하여 요소를 수직으로 중앙에 배치
예제 코드:
.purple-box {
background-color: purple;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
출력:
위의 코드 스니펫을 사용하여 위치의 absolute 속성을 사용하고 top 및 bottom의 값을 0으로 설정하여 보라색 상자를 수직 중앙에 설정했습니다. 또한 margin 값 을 설정합니다. auto는 top과 bottom 모두에 대해 여백 값은 left와 right에 대해 0입니다.
자주색 상자를 위의 코드로 사용자 정의한 후 위 출력에 표시된 absolute 속성을 사용하여 수직 중앙에 배치할 수 있습니다.
absolute 속성을 사용하여 요소를 수평 및 수직으로 중앙에 배치
예제 코드:
.purple-box {
background-color: purple;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto;
}
출력:
이 메서드는 위의 메서드 모음입니다. 자주색 상자를 가로 세로로 중앙에 배치하기 위해 위치를 absolute로 설정한 후 right, left, top, bottom에 값을 0으로 설정했습니다.
그런 다음 top, bottom, left 및 right에 대한 margin 값으로 auto를 할당했습니다.
위의 방법을 적용하여 보라색 상자를 페이지를 기준으로 수직 및 수평 중앙에 배치할 수 있습니다. 하지만 여기서는 컨테이너를 사용하고 있습니다.
녹색 테두리 컨테이너에 적합한 자주색 상자를 중앙에 배치하려면 컨테이너 속성 내부에 relative 위치를 아래와 같이 정의해야 합니다.
예제 코드:
.container {
margin: 50px;
display: flex;
border: 4px solid green;
padding: 50px;
width: 400px;
position: relative;
}
출력:
위의 세 인스턴스는 요소를 중앙에 배치하는 주요 세 인스턴스이며 각 예제에서 보라색 상자의 너비를 정의했습니다.
그 외에도 너비를 알 수 없는 경우 상대적인 스케일과 함께 transform 방법을 사용할 수 있으며 이 방법을 사용하면 너비 값을 지정하는 것보다 응답성과 유연성이 가장 좋습니다.
transform: translate(-50%, -50%);
transform: translate(-50%, 0);
transform: translate(0, -50%);
이 방법에서 translate 기능의 왼쪽 눈금은 x축으로 이동하고 다른 눈금은 y축으로 이동합니다. 규모에 따라 요소가 반응합니다.
결론
absolute 속성을 사용하여 블록 크기를 조정하고 백분율에 따라 반응할 수 있습니다. 이 기사 전반에 걸쳐 예제를 통해 요소를 가로, 세로 및 가로 및 세로로 중앙에 배치하는 방법에 대해 논의했습니다.
정적 요소가 아닌 절대 배치 요소는 우리가 선언한 컨테이너를 존중하지 않습니다. 그러나 상대적으로 배치된 요소의 경우 절대 배치된 요소는 margin 및 top, bottom, left 및 right 속성으로 경계를 갖습니다.
transform 방법은 너비가 정의되지 않은 경우 유연성과 응답성을 높입니다.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.