[分享]css3字体垂直居中显示

CSS3字体垂直居中显示是很多前端工程师经常遇到的问题。并且在不同的浏览器和设备上会有不同的解决方案。下面将介绍其中一些常用的方法。.verticalcenter { : relative; top:...

CSS3字体垂直居中显示是很多前端工程师经常遇到的问题。并且在不同的浏览器和设备上会有不同的解决方案。下面将介绍其中一些常用的方法。

.vertical-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
} 

上面的代码使用了CSS3的transform属性，通过将元素向上移动50%的高度，再使用translateY(-50%)将元素向下移动50%的高度，实现了垂直居中。但是需要注意的是该方法只适用于块级元素。

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

另一种常用的方法是使用CSS3的flex属性，通过将父元素设置为flex布局，再使用align-items和justify-content属性实现元素的垂直和水平居中。但是需要注意的是该方法不适用于IE10以及以下版本的浏览器。

.vertical-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

最后一种方法是使用position属性和transform属性，与第一种方法类似，但是该方法适用于所有类型的元素，并且兼容所有浏览器。