[分享]css3容器左右居中

CSS3提供了一种非常方便的方法，可以将容器垂直居中展示，这种方法适用于水平方向和垂直方向都居中的情况。要实现水平居中，我们可以使用display: flex和justifycontent: cent...

CSS3提供了一种非常方便的方法，可以将容器垂直居中展示，这种方法适用于水平方向和垂直方向都居中的情况。

要实现水平居中，我们可以使用display: flex和justify-content: center两个CSS属性。其中，display: flex可以使容器的内部元素形成一条水平线，而justify-content: center可以将该水平线居中显示。

.center {
  display: flex;
  justify-content: center;
} 

如果要实现垂直居中，则需要将上述属性改为align-items: center。

.center {
  display: flex;
  align-items: center;
} 

要同时实现水平和垂直居中，则可以组合使用这两个属性：

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

除了使用display: flex外，还可以使用position: absolute和transform属性来实现居中。我们可以将容器绝对定位，并将左、上、右、下坐标均设置为0，然后对容器应用transform: translate(-50%, -50%)属性。这个属性可以将容器的中心点移动到其左上角坐标（即0,0）的位置，实现垂直和水平方向的居中。

.center {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  transform: translate(-50%, -50%);
} 

总的说来，CSS3提供了多种实现容器居中的方法，我们可以根据实际需要选择一种最合适的方法。