css子元素位于div上下居中

在CSS中，要将一个子元素垂直居中于其父元素<div>内部，可以采用多种方法，这取决于父元素是否有固定的宽度，因为垂直居中有几种不同的策略。下面是几种常见的方法：

1. **Flexbox布局**（适用于现代浏览器）：

.parent {
  display: flex;
  align-items: center; /* 父元素的主轴（默认是高度）上居中 */
}
.child {
  /* 子元素无需额外设置，会自动跟随flexbox规则居中 */
}

2. **Grid布局**（适用于现代浏览器）：

.parent {
  display: grid;
  place-items: center; /* 同样是在网格主轴上居中 */
}
.child {
  /* 子元素无需额外设置 */
}

3. **使用绝对定位**（如果父元素有固定宽度）：

.parent {
  position: relative; /* 设置定位容器 */
  height: 100%; /* 或者设置具体的高度 */
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 将元素向左下移动自身一半的高度和宽度，达到居中效果 */
}

4. **内联块级元素**（如果子元素是`<p>`、`<div>`等，且行高与字体大小一致）：

.parent {
  line-height: 100%; /* 保证行高等于子元素高度 */
}
.child {
  vertical-align: middle;
  display: inline-block;
}

对于一些老版本的浏览器，可能需要使用JavaScript库（如jQuery）辅助实现垂直居中。