How to center text

Question

I’m having a huge difficulty to center texts vertically and horizontally inside the box, I’ve tried using position, text align, justify-items, text-align and I did not succeed. I only get it when the <li> is with display: flex, but then I’m forced to reposition everything again. In the example below we have a menu bar in red, the boxes with the text "category" and "product", I want to align to the center of each. As I would in this case?

.menu {
    display: flex;
    border: 2px solid red;
    width: 240px;
    height: 50px;
}
.menu li {
    list-style: none;
    border: 2px solid blue;
    width: 120px;
    height: 50px;
}
.sub-menu {
    position: relative;
    top: 32px;
}

    

<ul class="menu">
                 <li><a>Categoria</a>
                     <ul class="sub-menu">
                          <li><a>Produto</a></li>
                     </ul>
                </li>
            </ul>