让一个小盒子在大盒子里上下左右都居中css

如果你想让一个小盒子在另一个大盒子内部上下左右都居中对齐，你可以使用CSS的flexbox布局或者grid布局。以下是两种方法：

1. 使用Flexbox布局：

<style>
.container {
  display: flex;
  justify-content: center; /* 主轴上居中 */
  align-items: center; /* 轴线上居中 */
  height: 200px; /* 或者设置大盒子的高度 */
  width: 400px; /* 或者设置大盒子的宽度 */
}

.box {
  background-color: #f00;
  padding: 20px;
  border-radius: 5px;
}
</style>

<div class="container">
  <div class="box">小盒子内容</div>
</div>

2. 使用Grid布局：

<style>
.container {
  display: grid;
  place-items: center; /* 同时在主轴和轴线上居中 */
  height: 200px;
  width: 400px;
}

.box {
  background-color: #f00;
  padding: 20px;
  border-radius: 5px;
}
</style>

<div class="container">
  <div class="box">小盒子内容</div>
</div>