css 居中的方法总结

在CSS中，有多种方法可以实现元素的居中。以下是一些常用的居中技巧：

水平居中

1. 行内元素：
   使用text-align: center;来居中行内元素。

2. 块级元素：
   使用margin: 0 auto;可以水平居中块级元素。

垂直居中

1. 行内元素：
   使用line-height设置为与父元素的高度相同。

2. 块级元素：
   使用Flexbox：

   .parent {
       display: flex;
       align-items: center; /* 垂直居中 */
       justify-content: center; /* 水平居中 */
   }
   

3. 绝对定位：
   使用transform属性：

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

水平和垂直居中

1. Flexbox：

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

2. Grid：

   .parent {
       display: grid;
       place-items: center;
   }
   

3. 绝对定位：

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

4. 表格布局：

   .parent {
       display: table;
       width: 100%;
       height: 100%;
   }
   .child {
       display: table-cell;
       text-align: center;
       vertical-align: middle;
   }
   

5. 使用margin和transform：
   对于已知宽高的元素：

   .child {
       width: 50%;
       height: 50%;
       position: absolute;
       top: 50%;
       left: 50%;
       margin-right: -50%;
       transform: translate(-50%, -50%);
   }
   

每种方法都有其适用场景，你可以根据具体的布局需求选择合适的居中方式。