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時，會實現子項的垂直居中。