アイコンのposition中央揃え

Question

前提・実現したいこと

このようなデザインを目標に、positionプロパティを使いアイコンを中央配置にしたいと思います。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

 <section class="info">
　 <i class="far fa-envelope icon"></i>
   <h1></h1>
   <p></p>
 </section>

.info {
    width: 280px;
    position: relative;
}
 .info .icon {
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
} 

試したこと

アイコンをimage画像に置き換えると、真ん中に配置されるのですが
アイコンですと左上に固定される配置になってしまいます。
指定の方法が間違っているのでしょうか？
ご回答いただけるとうれしいです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[kei344]

（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

absolute にしているので高さを何かしらで作り必要はありますが。（提示されたHTML/CSSではそこまで再現できないので無視）

.info .icon {
    position: absolute;
    left: 50%;
    transform: translateX(−50%);
    margin: 0 auto;
}

【CSSで中央寄せの方法いろいろメモ - Qiita】
https://qiita.com/KAMEch/items/b52c5e23212b8fef81a7#transformで中央寄せ

Comments

[退会済みユーザー]

凄い方からのご回答ありがとうございます！transformというやり方もあるのですね。とても参考になりました。

Answer 2

.info .icon {
position: absolute;
right: calc(50% - 8px);
margin: 0 auto;
} 

calc(50%) → これで、要素の真ん中に来ます。
なぜ、-8をしているかというと、アイコンが16pxだった場合に真ん中に来てほしいので、半分の8pxをマイナスしています。

私は無理やりやってしまった感じしますが、他にもっと良い方法があるかもしれません。

Comments

[退会済みユーザー]

ご回答ありがとうございます！
アイコンを真ん中に配置できましたし、calcという方法も知れました。
わかりやすく、ありがとうございました。