画像を比率して中央寄せにするコード

よく使うのでメモ。最近はdisplay:flexで出番減ってる。

div {
		position: relative;
		overflow: hidden;
	}

div:before {
		content:"";
		display: block;
		padding-top: 75%; /* 高さを幅の75%に固定 */
	}

div p {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

div p img {
		width: 100%;
		height: auto;
	}

<div>
  <p><img src="画像パス"></p>
</div>