居中对齐 ListItemContent 并在 DIV 中将列表居中

Question

我正在尝试将这个列表置于“联系我”和 hr 标签下方，但失败了。这些东西在列中完美居中，但列表和图标是左对齐的，理想情况下，我希望它们像其他所有东西一样位于中心。我试过证明内容和文本对齐，但我可能把它们放在错误的地方。

假设我没有 CSS 并引导我完成它哈哈。

非常感谢。

<Cell col={6}>
    <h2>Contact Me</h2>
    <hr/>
    <div className="contact-list-con">
       <List>
         <ListItem>
           <ListItemContent style={{fontSize:'2.13vmax', fontFamily: 'Julius Sans One'}}>
             <Icon style={{fontSize:'2.13vmax'}}>perm_phone_msg</Icon>
             <a href="tel:">888-888-8888</a>
           </ListItemContent>
         </ListItem>

         <ListItem>
           <ListItemContent style={{fontSize:'2.13vmax', fontFamily: 'Julius Sans One'}}>
             <Icon style={{fontSize:'2.13vmax'}}>email</Icon>
             <a href="mailto:">hello@helloworld.com</a>
           </ListItemContent>
         </ListItem>
       </List>
     </div>
 </Cell>

Answer 1

<div class="centered">
<Cell col={6}>
    <h2>Contact Me</h2>
    <hr/>
    <div class="contact-list-con">
       <List>
         <ListItem>
           <ListItemContent style={{fontSize:'2.13vmax', fontFamily: 'Julius Sans One'}}>
             <Icon style={{fontSize:'2.13vmax'}}>perm_phone_msg</Icon>
             <a href="tel:">888-888-8888</a>
           </ListItemContent>
         </ListItem>

         <ListItem>
           <ListItemContent style={{fontSize:'2.13vmax', fontFamily: 'Julius Sans One'}}>
             <Icon style={{fontSize:'2.13vmax'}}>email</Icon>
             <a href="mailto:">hello@helloworld.com</a>
           </ListItemContent>
         </ListItem>
       </List>
     </div>
 </Cell>
</div>

.centered{
display:flex;
flex-direction:row;
justify-content:center;
width:100%;
}
.contact-list-con{
width:auto;
}

如果你把它放在一个弹性容器中，你可以将它居中而不必使用left, right, position