垂直居中其框内的图标[重复]

Question

我正在尝试使图标居中，但仅在其框内垂直。 我试过垂直对齐：中间；但它似乎不起作用。我也尝试了 line-height 方法，但是图标有一个外部边框，当它下降时，边框会粘在顶部，所以它看起来被拉伸了。 是这样的： enter image description here

我希望它看起来像这样：

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;
}

Answer 1

试试这个：

    .row {
    display: flex;
    align-items: center;
    }

使用 flexbox 为您提供了很多定位的灵活性，您应该检查一下：

https://www.w3schools.com/css/css3_flexbox.asp