什么是垂直居中
在布局设计中，经常会遇到需要让内容水平或垂直居中的情况。而这里我们着重讲解如何让一个div元素在其父元素中实现垂直居中。简单来说，垂直居中就是指让元素在垂直方向上居中显示，让内容看起来更加美观、整洁。
什么是div
在CSS中，div是一个非常常见的元素。它通常被用作一个容器来包含其他元素。在HTML中，div是一种没有特殊含义的块级元素，它不代表一种特殊的语义，而是被用来分组和布局不同的内容。因此，很多时候，我们需要对一个div实现垂直居中来达到图文布局均衡的效果。
如何让div垂直居中
下面我们来介绍一下如何让一个div在其父元素中垂直居中：
方法1：使用flex布局
使用CSS3中引入的flex布局，可以轻易实现一个元素的水平、垂直居中。flex布局提供了两个相关的属性，分别是justify-content和align-items，我们可以使用它们来实现水平、垂直居中。
.parent {
display: flex;
justify-content: center;
align-items: center;
}
这段代码中，display:flex会使父容器变成一个弹性盒子，子元素会自动填充父容器的宽度。接下来，我们使用justify-content:center和align-items:center来让元素水平和垂直居中。其中，justify-content:center会把子元素水平居中，align-items:center会把子元素垂直居中。
方法2：使用position和transform属性
如果您的项目还需要兼容IE9以下版本的浏览器，那么您可以考虑使用方法2来实现垂直居中。使用position和transform属性，可以让元素在父元素中实现垂直居中。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
这段代码中，我们首先让父元素的position属性为relative，这是为了让子元素的position属性正常工作。接下来，我们让子元素的position属性为absolute，将其置于父元素的顶部。此时，子元素的顶部仍然位于父元素顶部的位置，并没有实现垂直居中。
为了让子元素垂直居中，我们需要使用top:50%将子元素向下移动父元素高度的50%。但此时，子元素的垂直方向上依旧是以其顶部为基准的，我们还需要使用transform:translateY(-50%)属性将其向上移动自身高度的50%，从而实现垂直居中。
方法3：使用line-height属性
如果父元素的高度已经确定，并且只有一行文本需要居中，那么使用line-height属性也可以实现垂直居中。
.parent {
height: 100px;
line-height: 100px;
}
在这段代码中，我们将父元素的line-height设置为与其高度相等。由于行高会从内容框的顶部和底部向上和向下延伸，所以文本将会垂直居中。但是要注意，如果有多行文本，那么该方法就不适用了。
总结
以上就是实现div垂直居中的三种方法。当时，自己的具体情况来选择合适的方法，以达到最好的效果。总的来说，使用flex布局是最为简单和直接的方法，但是需要注意兼容性，而使用position和transform属性相对稍微复杂些，但是兼容性较好。而使用line-height属性则只适用于单行文本，如果需要居中多行文本，则需要联合使用其他方法。