垂直居中文字对齐技巧：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的方式需要注意浏览器兼容性。