CSS文字垂直對齊全解析

一、垂直對齊的定義

垂直對齊是指將文本在垂直方向上相對於容器進行定位，使其居中、頂部對齊、底部對齊或基線對齊等效果。在CSS中，有多種方式實現垂直對齊。

二、使用line-height屬性實現單行文字垂直對齊

對於單行文字垂直對齊，最簡單的方法是使用line-height屬性。將line-height屬性設置為與容器高度相同的值，就可以實現單行文字在容器中的居中、頂部對齊或底部對齊。

.container {
  height: 100px;
  line-height: 100px; /* 垂直居中 */
}
.container {
  height: 100px;
  line-height: 50px; /* 垂直頂部對齊 */
}
.container {
  height: 100px;
  line-height: 150px; /* 垂直底部對齊 */
}

三、使用display和vertical-align屬性實現多行文字垂直對齊

對於多行文字垂直對齊，line-height屬性的效果會出現問題。此時可以使用display和vertical-align屬性來實現。設置display為table-cell，使得元素表現為表格單元格，然後設置vertical-align為middle，就可以實現多行文字的垂直居中。

.container {
  height: 100px;
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
}

為了兼容IE6和7，還需在容器的父元素中加入display:table屬性。

四、使用flexbox布局實現彈性垂直對齊

flexbox是CSS3中的新布局模式，可以方便地實現彈性布局。對於多行文字垂直對齊，可以使用flexbox布局來實現。設置容器的display為flex，然後使用align-items屬性，設置子元素在垂直方向上的對齊方式。

.container {
  height: 100px;
  display: flex;
  align-items: center; /* 垂直居中 */
}
.container {
  height: 100px;
  display: flex;
  align-items: flex-start; /* 垂直頂部對齊 */
}
.container {
  height: 100px;
  display: flex;
  align-items: flex-end; /* 垂直底部對齊 */
}

五、注意事項

1、設置line-height時應該採用相對單位或無單位，而不是絕對單位。因為絕對單位在不同的設備上顯示效果可能會不一樣。

2、使用flexbox布局需要注意瀏覽器兼容性問題，建議使用前進行兼容性檢測。

3、在使用table-cell布局時，容器的父元素需要設置display為table才能生效。