css让内部元素子div位于上下左右都居中

在CSS中，要让内部元素（如子`<div>`）完全居中，并且水平垂直都居中，你可以使用Flexbox或者Grid布局，以及一些定位技术。以下是两种常见的方法：

**1. 使用Flexbox：**

.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;   /* 垂直居中 */
  height: 100%; /* 如果有固定高度的话，给parent设置高度 */
}

.child {
  /* 子元素不需要额外样式，因为已经通过父元素居中了 */
}

**2. 使用Grid布局：**

.parent {
  display: grid;
  place-items: center; /* 同样实现水平垂直居中 */
  height: 100%;
}

.child {
  /* 子元素同样无需额外样式 */
}

如果`.child`元素有固定的宽度和高度，也可以直接用绝对定位（配合`position: absolute`和`top: 50%`, `left: 50%`, 变形等）实现居中。