将div置于div的中间和边界

Question

我正在尝试将图标精确定位在现在的位置（边框的一半），但是我需要将其放置在div的中间，而不是在左侧。左：50％似乎将其推到整个页面的中间。我只希望它在实际容器的一半位置。谢谢！

查看当前结果：file on github

<section class="content">
    <div class="post">
        <div class="top-icon">
            <i class="topIcon fas fa-pencil-alt"></i>
        </div>
        <div class="post_container">
            <h3>Heading</h3>
            <p>Lorem ipsum doloirs sit amet, csatetur adipisicin, sed does eiusmod tehampor incididunt uts laboasre et dolhvaliqua. Ut enim vem, nostrasuaations ullamco labiosi ut saaliquip exoi asea comoodo Disco choice is the have great work.</p>
        </div>
    </div>
</section>

.content {
    clear: both;
    padding: 65px 50px 50px 50px;
    margin: 0 auto;
    overflow: hidden;
}

.post {
    margin-right: 25px; 
    float: left;
    width: 23%;
    border: 1px solid #ccc;
}

.post_container {
    padding: 50px 30px;     
    background: #fff;   
    text-align: center; 
    position: relative;
    margin: 0 auto;
}

.top-icon {
    background: #212121;
    text-align: center;
    padding: 6px 0px;
    width: 40px;
    position: absolute;  
    transform: translateY(-50%);
    z-index: 10;
}

.top-icon i.topIcon {
    color: #fff;
    font-size: 24px;
}

.post i {
    color: #464646;
}

.post h3 {
    margin-bottom: 10px;
}

.post p {
    margin-bottom: 25px;
    line-height: 1.5;
}

Answer 1

将position:relative添加到.post容器，然后将left:50%添加到.top-icon元素。