我想垂直定位我的字体很棒的图标，但我不能。它应该看起来像一个圆圈，它做了，但图标是在它的底部，它应该在中间。我该怎么做？我寻找了一个解决办法，但没有一个对我有效。:（
null
.container {
text-align: center;
margin-top: 60px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.flexing {
display: flex;
}
.aboutus i {
width: 150px;
border-radius: 50%;
background: whitesmoke;
text-align: center;
padding-top: 25%;
font-size: 60px;
color: grey;
}
.aboutus i:hover {
background: lightgreen;
color: white;
transition: all 0.5s;
}<div class="container">
<h2>About us</h2>
<hr>
<h5>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h5>
<section class="item flexing">
<div>
<i class="fa fa-rocket" aria-hidden="true" ></i>
<h3>Lorem ipsum</h3>
<p>Nam varius accumsan elementum. Aliquam fermentum eros in suscipit scelerisque.</p>
</div>
<div>
<i class="fa fa-sun-o" aria-hidden="true"></i>
<h3>Lorem ipsum</h3>
<p>Nam varius accumsan elementum. Aliquam fermentum eros in suscipit scelerisque.</p>
</div>
<div>
<i class="fa fa-google-wallet" aria-hidden="true"></i>
<h3>Lorem ipsum</h3>
<p>Nam varius accumsan elementum. Aliquam fermentum eros in suscipit scelerisque.</p>
</div>
<div>
<i class="fa fa-trophy" aria-hidden="true"></i>
<h3>Lorem ipsum</h3>
<p>Nam varius accumsan elementum. Aliquam fermentum eros in suscipit scelerisque.</p>
</div>
</section>
<div class="item">
<div>
<a href="#" >Learn more</a>
</div>
</div>
</div>null
您可以像这样轻松地使用flex特性，查看下面您编辑的类:
null
.container {
text-align: center;
margin-top: 60px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.flexing {
display: flex;
}
.flexing i {
display: flex;
width: 150px;
height: 150px;
border-radius: 50%;
background: whitesmoke;
align-items: center;
justify-content: center;
font-size: 60px;
color: grey;
}
.flexing i:hover {
background: lightgreen;
color: white;
transition: all 0.5s;
}<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<div class="container">
<h2>About us</h2>
<hr>
<h5>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h5>
<section class="item flexing">
<div>
<i class="fa fa-rocket" aria-hidden="true" ></i>
<h3>Lorem ipsum</h3>
<p>Nam varius accumsan elementum. Aliquam fermentum eros in suscipit scelerisque.</p>
</div>
<div>
<i class="fa fa-sun-o" aria-hidden="true"></i>
<h3>Lorem ipsum</h3>
<p>Nam varius accumsan elementum. Aliquam fermentum eros in suscipit scelerisque.</p>
</div>
<div>
<i class="fa fa-google-wallet" aria-hidden="true"></i>
<h3>Lorem ipsum</h3>
<p>Nam varius accumsan elementum. Aliquam fermentum eros in suscipit scelerisque.</p>
</div>
<div>
<i class="fa fa-trophy" aria-hidden="true"></i>
<h3>Lorem ipsum</h3>
<p>Nam varius accumsan elementum. Aliquam fermentum eros in suscipit scelerisque.</p>
</div>
</section>
<div class="item">
<div>
<a href="#" >Learn more</a>
</div>
</div>
</div>