Flex實現水平垂直居中

Flex布局是一種新的CSS布局方式，它提供了一組非常強大的屬性，可以更加靈活地控制容器中元素的位置、大小、排列方式等。要實現垂直居中，只需在容器中設置以下屬性：

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

這裡的align-items屬性是用來設置元素在交叉軸上的對齊方式，flex布局默認是在交叉軸上居中對齊。

這樣，容器中的元素就可以在垂直方向上居中了。

如果需要將元素在水平和垂直方向都居中，可以使用flex布局中的justify-content和align-items屬性：

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

這裡的justify-content屬性用於設置主軸上元素的對齊方式，center則表示居中對齊。

而align-items屬性仍然用於設置交叉軸上的對齊方式，也設置為center。

這樣，就可以輕鬆實現元素在垂直和水平方向上的居中了。

如果只需要將元素水平居中，可以設置容器中的justify-content屬性為center：

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

而只需要將元素垂直居中，可以設置容器中的align-items屬性為center：

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

這樣就可以分別實現元素在水平和垂直方向上的居中了。

如果想要實現類似於圖片和文字等不同類型的元素在同一居中容器中進行水平和垂直居中，在Flex布局中，還可以使用flex-wrap來實現：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.box {
  width: 50%;
  height: 50%;
}

代碼中設置了容器的flex-wrap屬性為wrap，這樣可以讓元素在水平方向上自動換行，而元素佔據的空間則可以根據box的設置進行調整。這樣，就能夠輕鬆地實現複雜元素的水平垂直居中了。

實現Flex布局中垂直居中，還可以在子元素中使用margin:auto的方式：

.container {
  height: 300px;
  display: flex;
}
.box {
  margin: auto;
}

這裡的container是父容器，代表著元素的父元素，包含著box元素，這裡設置了container的高度為300px，然後在box元素上設置了margin:auto,這樣就可以輕鬆實現元素在父容器中的垂直居中了。

除了使用align-items屬性實現元素的垂直居中之外，還可以使用display: flex的方式：

.container {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

這裡的flex-direction屬性是設置元素的排列方向，column則代表著豎直方向排列，而justify-content屬性則是設置元素在主軸上的對齊方式，center則代表著元素在主軸上的居中。

CSS flexbox能夠幫助你快速實現元素的垂直居中。你只需要將元素的容器設置為display:flex，然後將align-items屬性設為center即可：

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

這樣，元素就能夠在垂直方向上居中了。

可以通過以下方式實現在Flex布局中在元素水平垂直居中：

.container{
    border:1px solid #ccc;
    height:300px;
    display:flex;
    justify-content:center;
    align-items:center;
}

這裡通過設置父容器的display:flex，讓子元素充滿整個容器。通過設置justify-content:center和align-items:center來實現元素同時在水平和垂直方向上居中的效果。

原創文章，作者：VIMFE，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/333167.html