【CSS】テキストを縦方向にセンタリングする方法(レスポンシブ対応)
テキストを縦方向にセンタリングする方法として「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%); } }
コメントを残す