Positioning div in the middle and on the border of a div

Question

I am trying to position the icon exactly where it is now (halfway on the border), but I need to position it in the middle of the div, not on the left.
Left: 50% seem to push it to the middle of the entire page. I just want it halfway on the actual container. Thank you!

To view the current outcome: 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

Add position:relative to the .post container and then left:50% to your .top-icon element.

Then adjust your transform to center fully.

transform: translate(-50%, -50%);

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

.post {
    margin-right: 25px; 
    float: left;
    width: 50%;
    border: 1px solid #ccc;
    /* this*/
    position:relative;
}

.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; 
    /* change this */ 
    transform: translate(-50%, -50%);
    z-index: 10;
    /* and this */
    left:50%;
}

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

<link href="https://maxst.icons8.com/vue-static/landings/line-awesome/font-awesome-line-awesome/css/all.min.css" rel="stylesheet"/>
<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>