前端面试题总结（含部分答案）

实现垂直居中的几种方式
从两个方面讲：一种是普通流，一种是脱离文档流，具体如下：
-block + text-align + table-cell + vertical-align

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .parent {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
  }
  .child {
    display: inline-block;
  }
</style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

AI写代码

+transform

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

AI写代码

布局(兼容性好，自适应布局)

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .parent {
    display: flex;
    justify-content: center; 
    align-items: center; 
  }
</style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

AI写代码

css 常见布局可参考这篇文章css常见布局及解决方案，基本上常见布局都有讲到，超级详细，布局看这篇真的够了，我都是面试之前看一遍