前端必知：16居中专题

1. 块元素水平居中，设置 margin: 0 auto;
   这种方法适用于具有固定宽度的块级元素，通过设置左右的边距为"auto"来实现水平居中。

   .container {
     width: 800px; /* 假设容器宽度为800px */
     margin: 0 auto; /* 水平居中 */
   }
   

2. 行元素和内联元素的水平居中，使用 text-align: center;
   对于行元素和内联元素，可以通过设置父级元素的 text-align 属性为"center"来实现水平居中。

   .container {
     text-align: center; /* 水平居中 */
   }
   

3. 使用 vertical-align 设置行元素和内联元素的垂直居中。
   对于行元素和内联元素，可以通过设置 vertical-align 属性为"middle"来实现垂直居中。

   .container {
     height: 200px; /* 假设容器高度为200px */
     line-height: 200px; /* 设置行高等于容器高度 */
   }
   
   .child {
     display: inline-block;
     vertical-align: middle; /* 垂直居中 */
   }
   

4. 使用定位和 margin 结合，设置元素居中。

   a. 给需要居中的元素设置 margin-top 和 margin-left 为自身的一半。

   .child {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%); /* 平移自身一半的距离 */
   }
   

   b. 给需要居中的元素设置定位距离为 left: 50%; top: 50%;

   .child {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%); /* 平移自身一半的距离 */
   }
   

5. 父元素宽高固定，子元素绝对定位，可以实现水平绝对居中。

   a. 父元素宽高固定。

   .container {
     position: relative;
     width: 400px;
     height: 200px;
   }
   

   b. 子元素绝对定位，并设置左右、上下值为0，以占满整个父元素。

   .child {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     margin: auto;
     /* 可以设置宽高或其他样式 */
   }

 

    6.使用 flex 布局： 

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

这种方法将父元素设为弹性布局（flex），通过 justify-content: center; 和 align-items: center; 属性实现垂直居中。这是一种简单易用的方法，但需要注意兼容性问题。

7.使用绝对定位和 transform：

.container {
  position: relative;
}

.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* 平移自身一半的距离 */
}

这种方法利用绝对定位将子元素相对于父元素进行定位，通过设置 left: 50%; 和 top: 50%; 将子元素的起始位置定位在父元素的中心点，然后使用 transform: translate(-50%, -50%); 平移子元素的一半距离（自身宽度和高度的一半），从而实现垂直和水平居中的效果。需要注意的是，父元素需设置 position: relative;，以确保子元素相对于父元素进行定位。