Хочу выставить текст на центр

.outer { 
    display: flex; 
    justify-content: center; /*Центрирование по горизонтали*/ 
    align-items: center;     /*Центрирование по вертикали */ 
}

<div class="outer" style="height:100px; width: 100%; border:1px solid black"> 
    <span class="inner" style="border:1px solid red"> 
        Центрированный<br>Элемент 
    </span> 
</div>

.outer { 
 text-align: left; 
 border: 1px solid blue; 
 padding: 50px 20px; 
 } 
  .outer ul{ 
 list-style:none; 
  } 
 .outer a{ 
 text-decoration:none; 
 }

<div class="outer"> 
<ul> 
<li><a href="#">Главная магазин</a></li> 
 
<li><a href="#">Магазин</a></li> 
 
<li><a href="#">О нас</a></li> 
 
</ul> 
</div>