HTML에서 div를 중앙에 맞추는 방법

HTML에서 div를 중앙에 배치하는 방법에는 두 가지가 있습니다. 텍스트 정렬 속성(text-align: center)을 사용하세요. 단순한 레이아웃에 적합합니다. 유연한 레이아웃(Flexbox) 사용: 보다 유연한 레이아웃 제어를 제공합니다. 단계에는 상위 요소에서 Flexbox(display: flex)를 활성화합니다. div를 Flex 항목(flex: 1)으로 설정합니다. 수직 및 수평 중앙 정렬을 위해 align-items 및 justify-content 속성을 사용하십시오.

div를 중앙에 배치하는 방법

HTML에서는 CSS 속성을 사용하여 div를 중앙에 배치할 수 있습니다. 두 가지 방법이 있습니다:

방법 1: 텍스트 정렬 속성 사용

이 방법은 더 간단한 레이아웃에 적합하며 text-align 속성 사용: text-align 属性：

<code class="css">div {
  text-align: center;
}</code>

方法 2：使用弹性布局（Flexbox）

Flexbox 是一个 CSS 布局模块，提供更灵活的布局控制。要让一个 div 使用 Flexbox 居中，可以使用以下步骤：

1. 在父元素中启用 Flexbox：为包含 div 的父元素设置 display: flex。

<code class="css">.container {
  display: flex;
}</code>

2. 将 div 设置为 Flex 项目：为 div 设置 flex 属性，使其成为父元素的 Flex 项目。

<code class="css">div {
  flex: 1;
}</code>

3. 垂直居中：使用 align-items 属性将 div 垂直居中。

<code class="css">.container {
  align-items: center;
}</code>

4. 水平居中：使用 justify-content

   <code class="css">.container {
     justify-content: center;
   }</code>

   로그인 후 복사

Flexbox는 보다 유연한 레이아웃 제어를 제공하는 CSS 레이아웃 모듈입니다. Flexbox를 사용하여 div를 중앙에 배치하려면 다음 단계를 따르세요.

1. 🎜상위 요소에서 Flexbox를 활성화합니다. 🎜div가 포함된 상위 요소에 대해 display: flex를 설정합니다. 🎜🎜

   <code class="html"><div class="container">
     <div>这是居中的内容</div>
   </div></code>

   로그인 후 복사
   2. 🎜div를 Flex 항목으로 설정: 🎜div의 flex 속성을 ​​설정하여 상위 요소의 Flex 항목으로 만듭니다. 🎜🎜

      <code class="css">.container {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      div {
        flex: 1;
      }</code>

      로그인 후 복사
      3. 🎜세로 중심 맞추기: 🎜align-items 속성을 ​​사용하여 div를 세로로 가운데에 배치합니다. 🎜🎜rrreee
         4. 🎜가로 중심 맞추기: 🎜justify-content 속성을 ​​사용하여 div를 가로 가운데에 배치하세요. 🎜🎜rrreee🎜🎜 예: 🎜🎜rrreeerrreee

위 내용은 HTML에서 div를 중앙에 맞추는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!