靈活的垂直布局方案教程

一、使用CSS Flexbox實現垂直居中

在進行垂直布局時，CSS的Flexbox布局是一個靈活的選擇。利用Flexbox的align-items屬性和justify-content屬性可以很容易地實現垂直居中。

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

以上代碼就可以將父元素中的子元素水平和垂直居中。這個方法適用於單個子元素和多個子元素。如果有多個子元素，可以使用flex-wrap和flex-flow屬性來控制子元素的布局。

二、使用CSS Grid實現垂直居中

CSS Grid布局也是一種靈活的垂直布局方法。可以使用grid-template-rows屬性來指定網格行的高度，通過將行的高度設置為auto可以實現內容的垂直居中。

.parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.child {
  align-self: center;
}

以上代碼使用了自動行高的網格布局，將第一行和第三行的高度設置為auto，這使得中間一行的高度自適應。在子元素中使用align-self:center屬性可以將其垂直居中。

三、使用Table實現垂直居中

在CSS布局中，table布局可能是最老、最基本的一種。雖然不建議在布局時使用table，但它在某些特定的場景下確實是一種簡單且有效的選擇。可以將父元素設置為table，將子元素設置為table-cell，並使用vertical-align屬性進行垂直居中。

.parent {
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

以上代碼將父元素設置為table，子元素設置為table-cell，並使用vertical-align:middle屬性將子元素垂直居中。這種方法可以在處理文本內容時很好地工作。

四、使用Flexbox實現分割塊的垂直居中

Flexbox還可以用來實現分割塊的垂直居中。分割塊指的是兩個不同高度的區塊，將其分為上下兩部分。可以使用Flexbox的flex-direction屬性和align-items屬性來實現上下兩個區塊的垂直居中。

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.child1 {
  flex: 1;
}
.child2 {
  flex: 2;
}

以上代碼將父元素設置為flex容器，並使用flex-direction:column屬性將子元素設置為垂直布局。同時使用justify-content:center屬性實現居中排列，子元素的高度比例為1:2。如果想要改變比例，可以改變子元素的flex值。

五、使用CSS transform實現垂直居中

CSS transform也可以實現垂直居中。可以將子元素的位置設置為相對於父元素中心的位置。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

以上代碼將子元素的位置設置為相對於父元素中心的位置。使用top: 50%和left: 50%屬性將子元素的左上角移動到父元素中心，最後使用transform: translate(-50%, -50%)屬性校準子元素的位置到中心點。