I have the following CSS code that is part of a larger CSS code used in a website I'm developing:

.cards-u {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.card-u {
  margin: 20px;
  padding: 20px;
  width: 160px;
  height: 160px;
  line-height: 120px;
  justify-content: center;
  align-items: center;
  text-align: center;
  align-self: center;
  flex-direction: column;
  border-radius: 10px;
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
  transition: all 0.2s;
  text-decoration: none;
}

.card-1-u {
  background: radial-gradient(#1fe4f5, #3fbafe);
}

In the HTML code I have:

 
   
Text Sample 1
 
 
 
  
Text Sample 2
 
 

But the text Text Sample 1 and Text Sample 2 are not vertically centered, but at the top of the Flexbox. It looks like something in my large CSS code is interfering, but I don't know what. My question is assuming we don't know what the rest of the CSS is, can we force this part to do what we want, which is to center the text vertically in the flexbox?