[分享]css两边对齐 中间居中

CSS可以很方便地实现居中和对齐，但是对于不同的要求可能需要使用不同的属性和技巧。下面介绍一种实现左右两边对齐中间居中的方法。.container { display: flex; justifyco...

CSS可以很方便地实现居中和对齐，但是对于不同的要求可能需要使用不同的属性和技巧。下面介绍一种实现左右两边对齐中间居中的方法。

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

.content {
  margin: 0 auto;
} 

上面的代码中，.container 是最外层的容器，使用 display: flex; 将其设置为弹性布局。然后通过 justify-content: space-between; 将内容分别放到容器的左右两边，使其左右对齐。

接下来，将 align-items: center; 将内容垂直居中。然后在中间的内容（可以是文本或者图片等）上添加 margin: 0 auto; ，将其水平居中。这样就实现了左右两边对齐，中间居中的布局。

需要注意的是，容器的宽度应该是固定的，因为如果宽度是自适应的话，左右两边对齐的效果可能会被破坏。

总之，使用CSS实现布局可以有很多种不同的方法，需要根据具体情况选择合适的属性和技巧。