如何在body标签内实现父级div的垂直居中

你用flex做居中的实现思路是可行的，但代码有3处错误会导致效果不符合预期：

• 未给body设置有效高度：body默认高度由内部内容撑开，不会占满浏览器视口，align-items: center 没有足够的垂直空间做居中参照，垂直居中效果完全不生效
• 父div类名书写语法错误：<div class"parent"> 缺少属性等号，应该写为<div class="parent">，否则浏览器无法识别该元素的parent类名
• 未清除浏览器默认样式：浏览器默认给body加了8px的外边距，会导致页面出现多余滚动条，偏移居中位置

<style>
  /* 清除浏览器默认内外边距，避免布局偏移 */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  /* 让html、body占满整个视口高度，给居中提供参照 */
  html, body {
    height: 100%;
  }
  .container{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .parent div{
    height: 100px;
    width: 100px;
    background-color: yellow;
    margin: 10px auto;
  }
</style>
<body class="container">
     <div class="parent">
           <div></div>
           <div></div>
           <div></div>
     </div>
</body>

修正后父级div会在整个页面视口中水平+垂直居中，内部3个黄色方块会在父div内水平居中、上下间隔10px正常排列，没有多余偏移。

内容的提问来源于stack exchange，提问作者Nikhil Kriplani