html垂直居中的一条线

以下是两种实现HTML垂直居中的方法：

1. 使用flex布局

<style>
.parentBox {
  width: 800px;
  height: 500px;
  background: #ccc;
  display: flex; /* 设置flex布局 */
  align-items: center; /* 直接子元素垂直居中 */
  justify-content: center; /* 直接子元素水平居中 */
}
.childenBox {
  width: 200px;
  height: 200px;
  background-color: #ff0000;
  color: #fff;
}
</style>

<div class="parentBox">
  <div class="childenBox">
    <!-- 内容 -->
  </div>
</div>

2. 使用绝对定位和margin

<style>
* {
  padding: 0;
  margin: 0;
}
.box {
  width: 500px;
  height: 400px;
  background: red;
  margin: 100px;
  /*border: 2px;*/
}
.child {
  position: absolute;
  width: 200px;
  height: 150px;
  background: blue;
  margin: 125px 150px;
}
</style>

<div class="box">
  <div class="child"></div>
</div>