CSS方框居中技巧

在CSS中，將元素水平居中相對(duì)簡(jiǎn)單，只需使用margin:auto即可，但垂直居中則相對(duì)復(fù)雜一些，需要一些額外的技巧來實(shí)現(xiàn)，以下是一些常見的CSS方框居中方法：

1、水平居中：

div {
  margin-left: auto;
  margin-right: auto;
}

2、垂直居中：

使用flexbox：

div {
  display: flex;
  align-items: center;
  justify-content: center;
}

使用grid：

div {
  display: grid;
  align-items: center;
  justify-content: center;
}

使用position和transform：

div {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

3、水平和垂直居中：

使用flexbox：

div {
  display: flex;
  align-items: center;
  justify-content: center;
}

使用grid：

div {
  display: grid;
  align-items: center;
  justify-content: center;
}

使用position和transform：

div {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

是幾種常見的CSS方框居中方法，你可以根據(jù)自己的需求選擇適合的方法。