CSS를 사용하여 세로로 div 중앙에 배치

1. 내부 div의 top 및 transform 속성을 사용하여 CSS를 사용하여 div를 수직 중앙에 배치
2. CSS Flexbox를 사용하여 CSS에서 div를 수직으로 중앙에 배치

이 기사에서는 CSS에서 div를 세로로 가운데에 맞추는 방법을 소개합니다.

내부 div의 top 및 transform 속성을 사용하여 CSS를 사용하여 div를 수직 중앙에 배치

이 방법은 두 개의 컨테이너를 사용하여 div를 수직으로 중앙에 배치하는 방법을 보여줍니다.

먼저 외부 div에 대해 수직으로 내부 div를 중앙에 배치할 외부 및 내부 div를 만들 수 있습니다. CSS 속성 transform 및 top을 사용하여 내부 div를 수직으로 가운데에 둘 수 있습니다.

top 속성은 배치된 요소의 수직 위치만 설정합니다. 속성은 요소에 적용된 position 속성에 따라 다른 동작을 보입니다.

예를 들어 position이 relative로 설정되어 있으면 요소의 상단 가장자리가 정상 위치에서 아래쪽 또는 위쪽으로 이동합니다. transform 속성은 다양한 값을 사용하며 translateY()는 우리가 사용할 값입니다.

translateY() 함수는 Y축에서만 요소를 변환합니다. 이 두 속성을 사용하여 div를 수직으로 중앙에 배치할 수 있습니다.

예를 들어 div 요소를 만들고 HTML의 다른 div 요소로 래핑합니다. CSS에서 외부 div를 선택하고 height, width 및 background-color를 180px, 300px 및 blue로 설정합니다.

다음으로 내부 div를 선택하고 position 속성을 relative로 설정합니다. 그런 다음 red를 background-color 속성으로 적용하고 div에 20px 높이를 부여하고 translateY(-50%)를 transform 속성 값으로 사용합니다.

아래 예에서 top 속성의 50% 값은 내부 div의 상단 가장자리를 외부 div의 수직 중간 부분에 배치합니다. 그러나 내부 div는 높이가 20px이기 때문에 중앙에 배치되지 않습니다.

translateY(-50%) 값은 높이의 50%로 위쪽 가장자리를 위로 이동합니다. 음수 값 때문에 위쪽으로 이동합니다. 즉, div가 10px 위쪽으로 이동합니다. 이런 식으로 내부 div는 수직으로 중앙에 배치됩니다.

예제 코드:

<div class='outer-div'>
 <div class='inner-div'>
 
 </div>
</div>

div.outer-div {
 height: 180px;
 width: 300px;
 background-color: blue;
}

div.inner-div {
 position: relative;
 background-color:red;
 height:20px;
 top: 50%;
 transform: translateY(-50%);
}

CSS Flexbox를 사용하여 CSS에서 div를 수직으로 중앙에 배치

유연한 컨테이너를 만들고 justify-content 및 align-items 속성을 사용하여 CSS에서 div를 수직으로 중앙에 배치할 수 있습니다. display 속성을 사용하여 컨테이너를 플렉스박스로 정의할 수 있습니다.

justify-content 속성은 flexbox의 요소를 수평으로 정렬합니다. flex-start, flex-end, center 등과 같은 다양한 옵션이 필요합니다.

유사하게 align-items 속성은 flexbox 내부의 요소를 수직으로 배치합니다.

예를 들어 box 클래스로 div를 만들고 그 안에 또 다른 div를 만듭니다. 내부 div 안에 텍스트를 작성하십시오.

CSS에서 body 및 html 태그를 선택하고 높이를 100%로 설정합니다. 다음으로 box 클래스를 선택하고 height를 100%로 설정합니다.

background를 red로 설정하고 display 속성을 flex로 설정합니다. 마지막으로 center 값을 justify-content 및 align-items 속성으로 설정합니다.

아래 예는 div 내부의 텍스트를 수직 및 수평 중앙에 배치합니다. 이 두 속성은 유연한 컨테이너 내에서만 사용할 수 있습니다.

따라서 flexbox를 사용하여 div를 중앙에 배치할 수 있습니다.

예제 코드:

<div class="box">
 <div>The Div</div>
</div>

html,body {
 height: 100%;
}

.box {
 height: 100%;
 background: red;
 display: flex;
 justify-content: center;
 align-items: center;
}