画像をPC画面の上下左右中央配置する方法 －コーディングの効率化を極めるテクニック その５-

コーディングの効率化を極めるためのテクニック

色々なホームページを見ると、メイン画像が画面の中央に配置されているデザインをよく見ます。

今回は、そのやり方をみていきましょう。

画像を上下左右中央に配置する

HTML

<div class="box">

<div class="visual">   　 <!--画像に枠をつける　※これ大事！！ -->

<img src=　"  その画像までのパス　" alt="画像">

</div>

CSS

.box {

    width:100%; 

    height:100%; 

    position:relative;　　　<!--大枠にposition:relative;を指定 -->

}

.visual{

　　width: 〇〇px;     <!--画像には横幅指定は必須-->

     height:〇〇px;　　<!--画像には高さ指定は必須-->

    position:absolute; <!--画像の枠にposition:absolute;を指定 -->

    left:0;　　　　　　　　
    top:0;
    right:0;
    bottom:0;　

<!--　▲上下左右中央に指定　※positionと一緒に使用すると効果あり！ -->
    margin:auto;　　 <!--余白を自動にすることで中央になる-->

}

これでできます

▽ポーの写真で試しにできるかどうかやってみました

これで上下左右中央配置できました！！