CSS에서 수평으로 div 중앙에 배치

1. margin 속성을 사용하여 CSS에서 div를 수평으로 중앙에 배치
2. Flexbox를 사용하여 CSS에서 div를 수평으로 중앙에 배치
3. div를 inline-block으로 설정하고 text-align 속성을 사용하여 CSS에서 수평으로 중앙에 배치합니다

이 기사에서는 CSS에서 div를 수평으로 가운데에 맞추는 몇 가지 방법에 대해 설명합니다.

margin 속성을 사용하여 CSS에서 div를 수평으로 중앙에 배치

margin 속성을 사용하여 CSS에서 div를 가로로 가운데에 맞출 수 있습니다.

margin 속성은 요소에서 네 방향 모두의 여백을 설정하는 약식입니다. 속성을 사용하여 top, right, bottom 및 left에 여백을 할당할 수 있습니다.

왼쪽과 오른쪽 여백에 auto 옵션을 사용하여 div를 수평으로 가운데에 맞출 수 있습니다. 상단 및 하단 여백은 0으로 설정할 수 있습니다.

auto 옵션은 요소를 중앙에 배치하고 왼쪽과 오른쪽 여백을 균등하게 나눕니다. 중앙에 배치할 요소의 너비를 지정해야 합니다.

요소는 지정된 너비를 차지하고 나머지 수평 공간은 왼쪽과 오른쪽으로 균등하게 분할됩니다.

예를 들어 보겠습니다. 요소의 너비가 50%인 경우 auto 속성은 25%의 왼쪽 여백과 25%의 오른쪽 여백을 만듭니다.

display 속성을 사용하여 요소를 table로 설정할 수도 있습니다. 이러한 경우 테이블에 내용이 있으면 너비를 지정할 필요가 없습니다.

콘텐츠의 너비가 사용됩니다. 내부 div에 내용을 쓰지 않을 때 특정 너비를 지정합니다.

예를 들어 HTML에서 클래스 이름이 outerDiv인 div를 만듭니다. 그런 다음 HTML의 outerDiv 안에 다른 innerDiv를 중첩합니다.

CSS에서 outerDiv 클래스의 width를 100%로, background를 blue로 설정합니다. 다음으로 innerDiv를 선택하고 display 속성을 table로 설정합니다.

background를 red, height 및 width를 10vh 및 10vw로 설정합니다. 마지막으로 margin을 0 auto로 설정합니다.

여기에서 margin 속성의 0은 상단과 하단의 마진입니다. 자동 옵션은 왼쪽 및 오른쪽 여백에 대한 것입니다. CSS의 margin 속성을 사용하여 div를 가로로 가운데에 맞출 수 있습니다.

예제 코드:

<div class="outerDiv">
    <div class="innerDiv"></div>
</div>

.innerDiv {
    display: table;
    background:red;
    height:10vh;
    width:10vw;
    margin: 0 auto;
}
.outerDiv {
    width:100%;
    background:blue;
}

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

flexbox 속성을 사용하여 CSS에서 div를 가로로 가운데에 맞출 수 있습니다.

Flexbox는 요소를 수직 및 수평으로 중앙에 배치하는 간단한 방법을 제공합니다. flex를 만들고 요소가 flexbox에 배치되는 방식을 정의할 수 있습니다.

컨텐츠가 사용 가능한 공간을 모두 차지하지 않을 때 justify-content 속성을 사용하여 flexbox 내부 컨텐츠의 수평 위치를 지정할 수 있습니다. 외부 컨테이너에 flexbox를 만들고 justify-content 속성을 사용하여 내부 컨테이너의 위치를 ​​중앙으로 설정할 수 있습니다.

예를 들어 innerDiv 클래스를 선택하고 height 및 width 속성을 10vh 및 10vw로 설정합니다. 배경색으로 검정색을 설정합니다. 다음으로 outerDiv 클래스를 선택하고 width를 100%로 지정합니다.

배경색을 100%로 설정합니다. 그런 다음 display 속성을 flex로 설정하여 컨테이너를 flexbox로 만듭니다. 그 다음, justify-content 속성에 center 옵션을 씁니다.

따라서 CSS Flexbox를 사용하여 CSS에서 div를 수평으로 중앙에 배치할 수 있습니다.

예제 코드:

.innerDiv {
    background:black;
    height:10vh;
    width:10vw;
}
.outerDiv {
    width:100%;
    background:pink;
    display: flex;
    justify-content: center;
}

<div class="outerDiv">
    <div class="innerDiv"></div>
</div>

div를 inline-block으로 설정하고 text-align 속성을 사용하여 CSS에서 수평으로 중앙에 배치합니다

CSS에서 div를 수평으로 중앙에 배치하는 또 다른 방법은 div를 inline-block 요소로 설정하는 것입니다. 인라인과 마찬가지로 inline-block 요소는 새 줄에서 시작하지 않습니다.

그러나 width와 height를 설정할 수 있습니다. 그런 다음 외부 div의 text-align 속성을 사용하여 내부 div를 수평으로 중앙에 배치할 수 있습니다.

내부 div는 외부 div에서 text-align 속성을 상속하고 요소를 중앙에 배치할 수 있습니다.

예를 들어 위의 방법과 같이 내부 div에 일부 높이, 너비 및 배경을 설정합니다. 그런 다음 display 속성을 사용하여 요소를 inline-block으로 설정합니다.

외부 div에서 너비와 배경을 설정합니다. 마지막으로 text-align 속성을 center로 설정합니다.

이런 식으로 CSS에서 div를 수평으로 중앙에 배치할 수 있습니다.

예제 코드:

.innerDiv {
    background:red;
    height:10vh;
    width:10vw;
    display:inline-block;
}

.outerDiv {
    width:100%;
    background:blue;
    text-align:center;
}

<div class="outerDiv">
    <div class="innerDiv"></div>
</div>