画像のど真ん中にアイコンを表示する方法

プロフィール画像編集ボタンなど、画像のど真ん中に文字やアイコンを重ねたい場合。

縦方向にも横方向にもセンタリングされた何かを重ねたい。

なかなか素直に真ん中に来てくれないことが多い。（微妙にずれるなど）

縦や横のサイズをしっかり指定すれば解決できる。

//html
<div class="example" style="width:150px;">
    <img class="userIcon" src="/画像のパス.jpg" />
    <font-awesome-icon class="kodomo" :icon="['fa', 'camera']" />
</div>

1行目のdiv class="example" style="width:150px;"> が結構重要。

ここで親となるdivのサイズを画像と同じにしておかないと、

画像が横長になったり、画像の領域外に「重ねたい要素」が来てしまったりする。

//css
    .example {
        position: relative;
    }

    .example .kodomo {
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        margin: 0;
        /*余計な隙間を除く*/
        padding: 0;
        /*余計な隙間を除く*/
        color: white;
        /*アイコン色*/
        font-size: 30px;
        /*サイズ*/
    }

    .example img {
        width: 100%;
    }

    .userIcon {
        width: 150;
        height: 150px;
        border-radius: 50%;
        /*角丸*/
        object-fit: cover;
    }

真ん中に何かを配置するだけでこれだけのCSSの量である。

あんま触れてないけど、

.userIcon { width: 150; height: 150px; border-radius: 50%; /*角丸*/ object-fit: cover; }

で画像を正円に切り取とっている。

中央から切り取っている。

参考にしたサイト

画像の上におしゃれに文字やボタンをのせる方法（CSS）

CSSで画像を円形に切り抜く方法：object-fitが簡単で便利！