Html 显示以项目符号居中的列表

我在显示项目符号列表（如图像附件链接上的内容）时遇到问题。我已经尝试了几乎可能的CSS组合，但无法实现我想要的：

我的代码是这样的：

.sunco上市{
宽度：500px；
}
.sunco上市公司ul{
文本对齐：居中；
}
尚科上市的李彦宏{
浮动：左；
右边填充：25px；
} 
.sunco上市李：第n个孩子（1）{
列表样式：无；
}

备件1
备件1
备件1
备件1
备件1
备件1
备件1
备件1

flex

将保留列表项的项目符号，并使用

对齐内容：中心

和

flex-wrap:wrap

以有限的宽度进行包装，然后使用

：first child

和

：last child

实现第一个/最后一个效果

.sunco上市{
宽度：500px；
}
.sunco上市公司ul{
证明内容：中心；
显示器：flex；
柔性包装：包装；
}
尚科上市的李彦宏{
右边填充：25px；
} 
孙科上市的李：第一个孩子{
列表样式：无；
}
sunco上市的李：最后一个孩子{
字体大小：粗体；
}

备件1
备件1
备件1
备件1
备件1
备件1
备件1
备件1

您好，谢谢您的评论/帮助。这是使用flexbox吗？不过，我没有任何使用它的经验/知识。但是听到了很多关于它的好观点。@BryLedesma是的，这里有一个很好的指南哦，谢谢你提供关于flexbox的有用资源。我会在空闲时间研究一下这个问题。