Summary of front-end interview questions (including some answers)

Several ways to achieve vertical centering
From two aspects: one is a normal stream and the other is a separate document stream, as follows:
-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 writing code

+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 writing code

Layout (good compatibility, adaptive layout)

<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 writing code

For common layouts, please refer to this article for cssCommon layouts and solutions for css, basically all common layouts are mentioned, it is super detailed, it is really enough to read this article in the layout. I read it before the interview.