小程序中align-items: center竖直方向居中失败解决办法

Posted 2021-12-13 Z_hongli

垂直居中失败现象

可以看到我在CSS中设置了水平和垂直居中，但是显示出来并没有效果

CSS中代码

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

原因/解决办法

原因其实很简单，因为我这个文本是单独设置的，但是他没有设置高度，自然也就没法居中，现在我把它的高度大小设置同它的父容器一样高就行了

CSS

.Nav_text{
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

这样就能够解决完美居中的问题了！