Tweet

Pocket

テキストを縦方向にセンタリングする方法として「display:table-cell;」を使用する方法があるが、widthとheightを指定する必要がある。これではレスポンシブ対応する際には不便なので、widthを指定しなくてもテキストを縦方向にセンタリング出来る方法をご紹介。

sass

.box {
	height:150px;
	position: relative;

	p {
		width: 100%;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
}