将 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 元素。

然后将变换调整为完全居中。

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>

将 div 定位在 div 的中间和边界上

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

html

css

center

border