Bagaimana untuk memusatkan div dalam html

Terdapat dua cara untuk memusatkan div dalam HTML: Gunakan atribut text-align (text-align: center): sesuai untuk reka letak yang lebih ringkas. Gunakan reka letak fleksibel (Flexbox): Sediakan kawalan reka letak yang lebih fleksibel Langkah-langkahnya termasuk: mendayakan Flexbox (paparan: flex) dalam elemen induk. Tetapkan div sebagai item Flex (flex: 1). Gunakan sifat align-item dan justify-content untuk pemusatan menegak dan mendatar.

Cara memusatkan div

Dalam HTML, anda boleh menggunakan sifat CSS untuk memusatkan div. Terdapat dua kaedah:

Kaedah 1: Gunakan atribut penjajaran teks

Kaedah ini sesuai untuk susun atur yang lebih mudah, gunakan atribut 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-contentrreee

Flexbox ialah modul susun atur CSS yang menyediakan kawalan susun atur yang lebih fleksibel. Untuk memusatkan div menggunakan Flexbox, gunakan langkah berikut:

1. 🎜Dayakan Flexbox dalam elemen induk: 🎜Tetapkan paparan: flex untuk elemen induk yang mengandungi div. 🎜🎜

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

   Salin selepas log masuk
   2. 🎜Tetapkan div sebagai item Flex: 🎜Tetapkan atribut flex untuk div untuk menjadikannya item Flex bagi elemen induk. 🎜🎜

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

      Salin selepas log masuk
      3. 🎜Pemusatan menegak: 🎜Gunakan atribut align-item untuk memusatkan div secara menegak. 🎜🎜

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

         Salin selepas log masuk
         4. 🎜Pemusatan mendatar: 🎜Gunakan atribut justify-content untuk memusatkan div secara mendatar. 🎜🎜rrreee🎜🎜 Contoh: 🎜🎜rrreeerrreee

Atas ialah kandungan terperinci Bagaimana untuk memusatkan div dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!