面试常问：水平居中和垂直居中的方法

水平居中

1. 文本居中

   • 如果元素为行内元素，可以将父元素的text-align属性设置为center，这样子元素就会水平居中对齐

   .text{
   text-align: center;
   }

2. 固定宽度的居中

   • 如果元素宽度已知并固定，可以通过将左右margin设置为auto来实现水平居中。

   .content{
   margin-left:auto;
   margin-right:auto;
   }

3. 绝对定位和移动

   • 可以使用绝对定位和transform来实现水平居中。首先将元素的左边距和右边距都设置为auto，然后使用transform属性将元素向左平移50%。

   .content{
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   }

4. Flexbox布局

   .content{
   display: flex;
   justify-content: center;
   }

5. 表格布局

   • 将父元素的display属性设置为table-cell，并将text-align属性设置为center。

   .content{
   display: table-cell;
   text-align: center;
   }

垂直居中

1. 表格布局

   • 将父元素的display属性设置为table，并将子元素的display属性设置为table-cell，然后使用vertical-align属性将子元素垂直居中
   • 未知高度的块级父子元素居中，模拟表格布局
   • 缺点：IE67不兼容，父级 overflow：hidden 失效

   .parentcont {
   display: table;
   }
   .childCont {
   display: table-cell;
   vertical-align: middle;
   }

2. Flex布局

   • 将父元素的display属性设置为flex，并使用align-items属性将子元素垂直居中。

   .pacon {
   display: flex;
   align-items: center;
   }

3. 绝对定位和负边距

   • 已知高度的子元素，将父元素设置为相对定位，子元素设置为绝对定位，并使用top: 50%将其垂直居中，然后通过负边距的方式将子元素向上移动一半的高度

   .parentCon{
   position: relative;
   }
   .childCon {
   position: absolute;
   top: 50%;
   margin-top: -`100px; /* 假设子元素高度为200px的一半 */
   }

4. 文本垂直居中

   • 对于单行文本，可以设置父元素的line-height属性和高度相等，从而实现文本的垂直居中

   .con{
   height: 50px;
   line-height: 50px;
   }

5. CSS3位移

   • 使用CSS3的transform属性的translateY函数将子元素向上位移一半的高度实现垂直居中

   .con {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   }

6. inline-block兄弟元素

   • 通过在父元素中插入一个inline-block元素，并设置其垂直对齐方式为middle来实现垂直居中

   .parentCon {
   height: 100%;
   }
   .extracon {
   display: inline-block;
   vertical-align: middle;
   }
   .childcon {
   display: inline-block;
   vertical-align: middle;
   }