CSSで全ての要素を上下左右中央揃えにするテクニック

CSSで全ての要素を上下左右中央揃えにするテクニック
この記事は約2分で読めます。

CSSでは、真ん中に寄せるあれこれがいっぱいあるね。
時と場合、場所と時間の5W1Hで使うものも様々なので
用法も書きながら紹介しようと思います。

テキストを左右中央寄せ

これは上下には効かず、左右だけ中央に寄ります。
インライン要素の、「a」、「span」、「img」、「input」などは、あらかじめ「display:block」または、「display:inline-block;」を記述してくださいね!

【CSS】

text-align: center;
このテキストは左右中央に寄ります。

テキストを上下・左右中央寄せ

今度はテキストを上下左右中央寄せにします。
これは、親要素にあらかじめ幅と高さを設定し、「position:relative;」を追加します。
中央にしたい要素にはベンダープレフィックスも付けた指示も忘れないようにしてください。
(Android 4.2以下の端末は「-webkit-」が必要だったりします)
【CSS】

// 親要素に
.oya {
  width: 100%;
  height: 300px;
  position: relative;
}
// 中央にしたい要素に
.oya span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
このテキストは上下左右中央に寄ります。

画像の上下左右中央寄せ

これもテキストの時と同様に「transform」を使えば解決できます。
「transform」を使うので、親要素の幅と高さを指定しなくちゃいけません!
さらに、ベンダープレフィックスもお忘れなく。
【CSS】

// 親要素に
.oya {
  width: 100%;
  height: 300px;
  position: relative;
}
// 中央にしたい要素に
.oya span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

まとめ

どんな時も、上下左右中央寄せにする時は、「transform: transslate(-50%, -50%);」があればなんとかなりますね。

CSS

フロントエンドエンジニアとして10年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、今は亡きXHTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

制作のご依頼やお問い合わせはこちらから連絡お願いします。

エンデ・バタローをフォローする
シェアする
初めてのブログ

コメント

タイトルとURLをコピーしました