今回は上下中央に配置したいものの高さと幅が決まっていますが、この方法であれば文章などの不規則な高さのものも上下中央に配置可能です。 HTML <div class="box> <img src="dummy.png alt="" width="24" height="24" class="img" > </div> .box { position:relative; height:300px; } .img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }