我正在尝试将图标居中，但只能垂直放置在其框内。我试过vertical-align：middle;但似乎不起作用。我也尝试了line-height方法，但是图标有一个外部边框，当它下降时，边框保持在顶部，因此看起来很拉伸。就像这样：enter image description here
而且我希望它看起来像这样：
我在youtube上观看了一些教程，它们使用display：flex进行垂直对齐，但似乎无济于事！我真的很想了解它的总体运作方式...这是我的html
<section id="stories">
<div class="container">
<div class="row">
<div class="col-md-6">
<i class="fas fa-play"></i>
</div>
<div class="col-md-6">
<div class="successbox">
<h2>Success stories</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
</div>
</div>
</div>
</div>
</section>
和css：
#stories{
background : url("http://demo.themefisher.com/educenter/images/backgrounds/success-story.jpg");
padding: 60px 0px;
}
#stories i{
font-size: 20px;
color :#fff;
background-color : #ffbc3b;
padding:40px;
border-radius: 100%;
display: table-cell;
vertical-align: middle;
}
尝试一下：
.row {
display: flex;
align-items: center;
}
使用flexbox为您提供很多FLEXiblity定位功能，您应该将其签出：