ブロック要素は中央寄せにならないので、display: inline-block;でインラインにしてあげます。 margin: autoで中央寄せ margin: auto;を使って上下左右中央寄せにします。 ※中央寄せしたい要素の幅、高さを指定しないと親要素のサイズに合わせて伸びてしまうので注意。 .parent{ border: 1px solid #aaa; position: relative; height: 200px; width: 300px; } .inner{ border: 1px solid #aaa; width: 150px; height: 50px; top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: auto; }

<div class="slide"> <img src="sample.png" alt="sample" width="150" height="100"> </div> .slide { position: relative; height: 100vh; } .slide img { position: absolute; top: 0; left: 0; width: auto; height: auto; min-width: 100%; min-height: 100%; max-width: inherit; } imgタグの親にposition: relativeを入れて、imgタグにもろもろを入れていく感じになります。 これでimgタグがbackground-size: cover;と同じような感じになります。 object-fit IEを対応にしない場合はobject

height: 100vh height: 100vhで要素hogeの高さを指定する場合の例。親要素はhtml、bodyです。 .hoge { height: 100vh; } viewport heightの場合、高さの指定をしたい要素にheight: 100vhを指定するだけです。 height: 100% height: 100%で要素hogeの高さを指定する場合の例。親要素は同じくhtml、bodyです。 html, body, .hoge { height: 100%; } 今まで通りのやり方の場合、高さの指定をしたい要素の親要素全てにheight: 100%の指定をする必要がありますが、古いブラウザでも使用することができます。 ちなみに、コンテンツ量が画面サイズより大きい場合、heightではなくmin-heightで指定するのがポイントです。そうすることでコンテンツの長さに応