[分享]css3如何四周分布对齐

CSS3通过将样式表语法增强，使之对四周分布对齐提供了更好的支持。其中一种方法是使用Flexbox布局，在容器中设置alignitems和justifycontent属性为center，即可将容器内的...

CSS3通过将样式表语法增强，使之对四周分布对齐提供了更好的支持。

其中一种方法是使用Flexbox布局，在容器中设置align-items和justify-content属性为center，即可将容器内的元素四周分布对齐。

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

.container > div {
  margin: 10px;
  width: 100px;
  height: 100px;
} 

另一种方法是使用CSS Grid布局，通过设置grid-template-rows和grid-template-columns属性为1fr，即可将容器内的元素四周分布对齐。

.container {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
}

.container > div {
  margin: 10px;
  width: 100px;
  height: 100px;
} 

以上两种方法都可以实现四周分布对齐的效果，具体需要根据实际情况选择使用哪种布局。