css3设置box-pack和box-align让div里面的元素垂直居中

设置box-pack和box-align属性可以实现CSS3让div里面的元素垂直和水平居中，下面是详细的攻略：

设置box-pack和box-align属性可以实现CSS3让div里面的元素垂直和水平居中，下面是详细的攻略：

1. 首先，需要将容器的display属性设置为flex，表示启用flex布局。然后，将justify-content和align-items属性都设置为center，这样flex容器里的所有子元素都将垂直居中。

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

1. 除了上面的设置外，还可以使用box-pack和box-align属性来实现垂直居中。其中，box-pack属性用于水平居中，box-align属性用于垂直居中。

.container {
  display: box;
  box-pack: center;
  box-align: center;
}

需要注意的是，box属性已经被弃用了，建议使用flex布局。

下面是两个示例说明：

1. 示例1：将div里的文本内容水平和垂直居中

<div class="container">
  <p>文本内容</p>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
p {
  margin: 0;
  text-align: center;
}

这个例子中，我们首先设置了容器的高度为200px，然后使用flex布局将子元素 p 水平和垂直居中。

1. 示例2：将容器里的图片垂直居中

<div class="container">
  <img src="example.jpg" alt="示例图片">
</div>

.container {
  display: flex;
  align-items: center;
  height: 200px;
}
img {
  margin: 0 auto;
}

这个例子中，我们首先设置了容器的高度为200px，然后使用flex布局将子元素 img 垂直居中。由于图片是一个内联元素，为了实现水平居中，我们用margin: 0 auto来将左右margin设置为auto，使其自动居中。