Flex布局水平垂直居中探究

一、Flex布局水平垂直居中单词

在前往探究Flex布局水平垂直居中之前，我们需要先了解相关的单词含义，以便更好地理解。Flex布局的单词含义： flex-direction: 主轴方向 justify-content: 主轴对齐方式 align-items: 交叉轴对齐方式

水平垂直居中的单词含义： Horizontal: 水平 Vertical: 垂直 Center: 居中

二、Flex布局如何垂直居中

常见的Flex布局垂直居中方式是使用align-items属性。可以通过设置容器的align-items属性为center来让子项垂直居中。例如：

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

在该例子中，.container代表容器，它的align-items属性设置为center时，会使整个容器的所有子项都垂直居中。

三、Flex布局垂直居中

除了使用align-items属性进行垂直居中，还有其他方法。例如，可以使用justify-content属性来进行水平居中，再使用align-items属性来进行垂直居中。例如：

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

在该例子中，.container代表容器，它的justify-content属性设置为center时，会使整个容器水平居中。而align-items属性设置为center时，会使整个容器的所有子项都垂直居中。

四、Flex实现水平垂直居中

实现水平垂直居中最常见的方法是使用justify-content和align-items属性。例如：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.item {
  width: 100px;
  height: 100px;
}

在该例子中，.container代表容器，它的justify-content属性设置为center时，会使整个容器水平居中。而align-items属性设置为center时，会使整个容器的所有子项都垂直居中。.item代表子项，它的宽度和高度都为100px。

五、Flex布局实现水平垂直居中

对于需要水平和垂直居中的子项，可以使用margin:auto以及Flex布局来实现。例如：

.container {
  display: flex;
}
.item {
  width: 100px;
  height: 100px;
  margin: auto;
}

在该例子中，.container代表容器，它的display属性设置为flex时，会使用Flex布局。.item代表子项，它的宽度和高度都为100px，而margin属性设置为auto时，会自动计算出左右和上下的间距，并实现子项的水平和垂直居中。

六、使用Flex布局实现水平垂直居中

另外一种实现水平垂直居中的方式是使用Flex的定位属性。例如：

.container {
  display: flex;
  position: relative;
}
.item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

在该例子中，.container代表容器，它的display属性设置为flex时，会使用Flex布局。.item代表子项，它的position属性设置为absolute时，会使子项脱离文档流。top属性和left属性分别设置为50%时，会把子项的左上角放置在容器的中心。最后，使用transform属性的translate()函数，使子项在垂直和水平方向上各向左和向上移动50%。

七、Flex布局文字垂直居中

对于要实现文本垂直居中的情况，可以使用vertical-align属性。例如：

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

在该例子中，.container代表容器，它的justify-content属性和align-items属性都设置为center时，会实现容器的水平和垂直居中。而.text代表的是文本内容，它的vertical-align属性设置为middle时，会实现文本的垂直居中。

八、Flex水平垂直居中

一些情况下，只需要实现水平居中或垂直居中，而不是同时实现。例如：

.container {
  display: flex;
  justify-content: center;
}
.item {
  width: 100px;
  height: 100px;
}

在该例子中，.container代表容器，它的justify-content属性设置为center时，会实现容器的水平居中。而.item代表子项，它的宽度和高度都为100px。

九、Flex设置垂直居中

对于想要设置一个子项垂直居中，可以使用margin: auto以及Flex布局的一个技巧。例如：

.container {
  display: flex;
}
.item {
  width: 100px;
  height: 100px;
  margin-top: auto;
  margin-bottom: auto;
}

在该例子中，.container代表容器，它的display属性设置为flex时，会使用Flex布局。.item代表子项，它的宽度和高度都为100px，而margin-top和margin-bottom属性都设置为auto时，会自动计算出上下的间距，并实现子项的垂直居中。

十、Flex垂直居中对齐

要进行Flex垂直居中对齐，可以使用align-self属性。例如：

.container {
  display: flex;
}
.item {
  width: 100px;
  height: 100px;
  align-self: center;
}

在该例子中，align-self属性只设置在.item代表的子项上，而不是在.container代表的容器上。align-self属性设置为center时，会实现子项的垂直居中。