1、给定固定大小的父 子盒子，要实现子盒子上下左右居中，有几种方法？css完整代码

为了实现给定固定大小的子盒子上下左右居中，CSS中有多种方法可以做到这一点。这里列举三种常见的方法：

1. **Flex布局** (适合现代浏览器):

.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.child {
  width: fixed-width; /* 确保子盒宽高 */
  height: fixed-height;
}

在这个例子中，`.parent`是一个flex容器，而`.child`作为内部元素会自动垂直和水平居中。

2. **Grid布局** (同样适用于现代浏览器):

.parent {
  display: grid;
  place-items: center; /* 同样实现上下左右居中 */
  width: fixed-size;
  height: fixed-size;
}

.child {
  width: fixed-width;
  height: fixed-height;
}

网格布局中的`.place-items: center`属性负责对齐。

3. **Positioning + Padding / Margin** (兼容所有浏览器):

.parent {
  position: relative;
  width: fixed-size;
  height: fixed-size;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: fixed-width;
  height: fixed-height;
}

这种方法利用了绝对定位，并将子盒子移动到其父盒子中心位置。

请注意，上述代码中的“fixed-width”和“fixed-height”应替换为你实际需要的宽度和高度值。同时，对于一些老版本的浏览器，可能还需要添加相应的前缀如 `-webkit-` 或 `-moz-` 来兼容。