css3垂直居中的面试题

在前端面试中，经常会涉及到 CSS 的垂直居中，而 CSS3 中有多种方式可以实现垂直居中。以下是其中一个面试考点：

/* HTML */
<div class="parent">
  <div class="child">Some content</div>
</div>

/* CSS */
.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 可根据实际需求，设置具体高度 */
  height: 200px;
}

CSS3 的 flex 属性是较为火热的垂直居中方式。将父元素设为 flex 布局，通过 align-items 和 justify-content 即可控制子元素在垂直和水平方向上的对齐方式。

需要注意的是，使用 flex 属性时，父元素必须设置一个具体的高度。否则，子元素将无法垂直居中。

以上就是一个关于 CSS3 垂直居中的面试题，掌握好这个知识点可以让你轻松通过前端面试。