Center three columns and center its content - html

Question

I have got a list of eight items and I would like to center it in three columns as well as its content so that the words are aligned with respect first and second line. What's the best way to achieve it? I've tried with percent but the content still disaligned.
body{
margin: 0;
padding: 0;
}
.wk_search-resume-list {
width: 100%;
overflow: auto;
}
.wk_search-resume-list li {
margin-bottom: 16px;
font-size: 14px;
position: relative;
width: 33%;
display: inline-block;
vertical-align: top;
text-align: center;
}
.wk_search-resume {
background-color: white;
border: 1px solid #bfbfbf;
margin: 32px 16px;
padding: 24px 24px 8px 24px;
font-size: 0;
position: relative;
}
.wk_search-resume-list strong {
display: block;
}
.wk_search-resume-list.wk-interval {
margin-top: 32px;
border: 1px solid red;
padding: 0;
}
<ul class="wk_search-resume-list wk-interval">
<li class="wk_search-resume-list--procedure">Tipo de procedimiento <strong>Procedimiento ordinario</strong></li>
<li class="wk_search-resume-list--subvoice">Subvoz <strong>Extinción y suspensión del arrendamiento</strong></li>
<li class="wk_search-resume-list--favor">A favor <strong>Arrendador</strong></li>
<li class="wk_search-resume-list--year">Año <strong>1992</strong></li>
<li class="wk_search-resume-list--resource">Tipo de recurso <strong>Procedimiento</strong></li>
<li class="wk_search-resume-list--against">En contra <strong>Arrendatario</strong></li>
<li class="wk_search-resume-list--judgment">Sentido del fallo <strong>Arrendador</strong></li>
<li class="wk_search-resume-list--judgment">Argumentos legales <strong>Crédito bancario</strong></li>
</ul>
Notes:
This information is dinamic and in case of having only one item, this one should be centered on screen.
If a item is deleted, this one must be replaced by the next one on the list.

Answer 1

I am still unclear on how you want to divide up the 8 items, but here is a rudimentary example showing what is possible with CSS Grid and Flexbox.
JS BIN example
ul{
display: grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
li{
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}

Answer 2

Finally, I achieved solve this with flexbox.
Container:
display: flex;
justify-content: space-around;
flex-wrap: wrap;
Content:
flex-grow: 1;
width: 33%;
Last-child of content (in order to position it on the left):
flex-grow: 80;