コーディング

高さが不定な要素の天地中央に画像やテキストを配置するcss

2016.10.05

2017.05.24

鉄骨天井jの駅

レスポンシブサイト制作で頻出する天地中央に配置したい問題を簡単に解決できるかもしれないテクニックです。

cssは簡単で以下になります。

.天地中央にしたい要素に{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

実際に実装してみましょう。実装の際はベンダープレフィクスの記述を忘れずに追加しましょう。

See the Pen qaVzgW by hoshu_t (@hoshu_t) on CodePen.

transformが便利ですね。研究次第で他にも色々なことができそうです。
何かわかればまたここに書こうと思います。

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。