垂直居中文字對齊技巧：CSS實現 | 立體網頁設計技巧

一、使用Flexbox實現垂直居中

Flexbox是CSS3中的一種布局模式，它可以輕鬆實現元素的水平居中和垂直居中。使用Flexbox實現垂直居中有多種方式：

1. 在父元素上設置display:flex和align-items:center，這樣子元素即可垂直居中。

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

2. 在父元素上設置display:flex和justify-content:center，然後在子元素上設置align-self:center，這樣子元素即可垂直居中。

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

3. 在父元素和子元素上都設置display:flex，並在父元素上設置align-items:center，子元素上設置margin:auto，這樣子元素即可垂直居中。

.parent {
  display: flex;
  align-items: center;
}
.child {
  display: flex;
  margin: auto;
}

二、使用table-cell實現垂直居中

使用CSS的table-cell屬性可以實現垂直居中，這種方式比較常用於表格布局。

1. 將父元素設置為display:table，子元素設置為display:table-cell和vertical-align:middle，這樣子元素即可垂直居中。

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

三、使用transform實現垂直居中

使用CSS的transform屬性可以實現垂直居中，這種方式比較巧妙。

1. 將父元素設置position:relative，子元素設置position:absolute和top:50%，然後使用transform:translateY(-50%)來實現垂直居中。

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

四、使用line-height實現垂直居中

使用CSS的line-height屬性可以實現文字的垂直居中。

1. 將父元素的line-height屬性設置為和父元素高度相同，然後在子元素上設置vertical-align:middle，這樣子元素的文字即可垂直居中。

.parent {
  height: 100px;
  line-height: 100px;
}
.child {
  vertical-align: middle;
}

五、總結

以上幾種方法都可以實現垂直居中，具體使用哪種方式要根據實際情況而定。使用Flexbox和table-cell的方式兼容性較好，使用transform和line-height的方式需要注意瀏覽器兼容性。