CSS教程之div垂直居中的多种方法

下面是关于CSS中div垂直居中的多种方法的完整攻略。

方法一：使用flex布局

在CSS3中，flex布局提供了一种简单且有效的垂直居中方法。可以通过以下步骤实现：

1. 将父元素的display属性设置为flex
2. 将父元素的justify-content和align-items属性都设置为center，即水平居中和垂直居中。

示例如下：

<style>
  .parent {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
  }
</style>

<div class="parent">
  <div class="child">Hello World</div>
</div>

方法二：使用position和transform属性

这是另一种常见的垂直居中方法，即使用CSS的position和transform属性：

1. 将要居中的元素的position属性设置为absolute
2. 将要居中的元素的top和left属性都设置为50%，即让元素处于父元素的中心位置
3. 将要居中的元素的transform属性设置为translate(-50%, -50%)，即将元素自身向上和向左移动50%的宽度和高度，使其完全居中

示例如下：

<style>
.parent {
    height: 400px;
    position: relative;
    background-color: #eee; /*观察效果用*/
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>

<div class="parent">
  <div class="child">Hello World</div>
</div>

以上就是关于CSS教程之div垂直居中的多种方法的说明，两种方法都可以实现div的垂直居中，需要根据实际需求选择适合自己的方式。