Как выровнять по средине и сделать длиной по самому широкому? ответы по длине могут менятся

Вариантов несколько. Например сам список UL размещается во flex-сетке, примерно по такой схеме:

<div class="flex">
    <div class="flex-grow1"></div> --- пустая ячейка для отступа
    <div class="flex-grow5">
        <ul>
        --- сам список
        </ul>  
    </div>
    <div class="flex-grow1"></div> --- пустая ячейка для отступа
</div>

Чтобы не задавать явно ширину используется grow-свойство.