css对于父布局代码垂直居中

CSS中的垂直居中一直是前端开发者常遇到的一个问题。在布局中，父元素的垂直居中尤其困难，因为子元素的高度和父元素的高度往往是不一致的。但是通过CSS的flex布局可以轻松解决这个问题。

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

如上代码所示，当父元素设置了 display:flex 属性后，只需要添加两行代码，分别是 justify-content:center 和 align-items:center，子元素就能水平垂直居中了。

如果需要让子元素上下间距有一定的距离，只需要在父元素中加上一个 flex-direction:column 的属性即可。

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

上述代码中的 flex-direction: column 属性使得子元素在布局中是从上往下排列的，同时保持水平、垂直居中的状态。

总之，通过CSS的flex布局，可以很轻松地实现父元素中子元素的垂直居中。