css一行居中多行居左

CSS是网页设计必不可少的一部分，而对于页面元素的布局更是重中之重。在开发过程中，我们经常会遇到一些需要将元素一行居中和多行居左的情况。而今天我们来介绍一下如何在CSS中实现这两种布局方式。

一行居中：

.box {
  text-align: center;
}
.box .content {
  display: inline-block;
} 

上述代码中，我们给外层容器加了text-align:center属性，使其内部元素水平居中。但是，这样只是让内部元素水平居中，并没有做到垂直居中。因此我们需要将内部元素设置为display:inline-block，这样就可以实现垂直居中了。

多行居左：

.box {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
.box .content {
  width: 200px;
  margin-right: 20px;
  margin-bottom: 20px;
} 

对于多行居左，我们利用了CSS3中的flex布局来实现。首先，我们将外层容器设置为display:flex，这样内部元素就可以自动排列成多行了。而justify-content属性用于水平对齐，align-items属性用于垂直对齐。设置为flex-start后，内部元素就会沿着左边排列。而flex-wrap则用于强制换行，使得元素位置能够自动适应页面宽度。最后，我们给内部元素加上一些间距和宽度，就能实现多行居左的效果了。