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

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%);」があればなんとかなりますね。

SNSフォローボタン
エンデ・バタローをフォローする
CSSHTMLサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

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

コメント

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