【css】5种方法实现div居中（自用）

/* 方法1: 使用flexbox */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 使用视窗高度来保证div可以居中 */
}
 
.child {
  width: 50%; /* 或者其他尺寸 */
  /* 其他样式 */
}
 
/* 方法2: 使用grid */
.container {
  display: grid;
  place-items: center;
  height: 100vh; /* 使用视窗高度来保证div可以居中 */
}
 
.child {
  width: 50%; /* 或者其他尺寸 */
  /* 其他样式 */
}
 
/* 方法3: 使用绝对定位和transform */
.container {
  position: relative;
  height: 100vh; /* 使用视窗高度来保证div可以居中 */
}
 
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%; /* 或者其他尺寸 */
  /* 其他样式 */
}
 
/* 方法4: 使用margin:auto */
.container {
  position: relative;
  height: 100vh; /* 使用视窗高度来保证div可以居中 */
}
 
.child {
  width: 50%; /* 或者其他尺寸 */
  margin: auto;
  /* 其他样式 */
}
 
/* 方法5: 使用text-align和inline-block */
.container {
  text-align: center;
  height: 100vh; /* 使用视窗高度来保证div可以居中 */
}
 
.child {
  display: inline-block;
  width: 50%; /* 或者其他尺寸 */
  /* 其他样式 */
}

以上代码提供了5种不同的方法来实现div的水平和垂直居中。每种方法都有其适用的场景，开发者可以根据具体需求选择合适的方法。