CSS 实现居中的五种方法，以及十种现代布局

感谢 chatGPT 的回答：

1. 使用 margin: 0 auto 实现居中：

   .centered-element {
     margin: 0 auto;
   }
   

2. 使用 text-align: center 实现居中：

   .centered-element {
     text-align: center;
   }
   

3. 使用 flex 布局实现居中：

   .centered-element {
     display: flex;
     justify-content: center;
     align-items: center;
   }
   

4. 使用 absolute 定位实现居中：

   .centered-element {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }
   

5. 使用 grid 布局实现居中：

   .centered-element {
     display: grid;
     justify-content: center;
     align-items: center;
     /* place-items: center;  /* 上面两句可以用这一句替换 */
   }
   

甜点：如何用一行 CSS 实现 10 种现代布局