div中内容上下居中小结

下面是“div中内容上下居中小结”的完整攻略。

1. 使用flex布局

使用flex布局是一种简单且通用的方法，可以将容器中的内容上下居中。具体方法如下：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

上述代码会使.container容器中的内容在纵向上完美居中。其中，justify-content: center将内容水平居中，而align-items: center将内容在纵向上居中。

以下是一个使用flex的示例，展示了一个垂直居中的div：

<div class="container">
  <p>Hello World</p>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  border: 1px solid #ddd;
}

2. 使用position属性完成

另一个常见的方法是使用position属性将元素绝对定位，并在中心点上下和纵向居中。具体如下：

.container {
  position: relative;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

上述代码将容器设置为相对定位，而居中的元素设置为绝对定位。通过设置top和left属性为50%，并将它们的值通过transform属性向左上移动自身宽度和高度的一半，最终将会完美居中。

以下是使用position的示例代码：

<div class="container">
  <div class="centered">
    <p>Hello World</p>
  </div>
</div>

.container {
  position: relative;
  height: 100px;
  border: 1px solid #ddd;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

以上是“div中内容上下居中小结”的完整攻略，希望对您有所帮助。