CSSで上下センター揃え

css

2021-01-17

上下センター揃え

フレックスボックス

「display: flex」を使います。

セレクタ{display: flex;
  justify-content: center;
  align-items: center;}

 

左右センターは「justify-content: center;」、上下センターは「align-items: center;」で揃えます。

インライン要素の場合

セレクタ{display: inline-block;
  vertical-align: middle;}

 

テーブル要素にする

親{display: table;}
子{display: table-cell;
vertical-align: middle;}

 

「absolute」を使う①

widthとheightを設定できるならこちら!

親{position:relative;}
子{position:absolute;
top:0;
bottom:0;
right:0;
left:0;
margin:auto;}

 

「absolute」を使う②

widthとheightを指定できないときはこちら!

親{position:relative;}
子{position:absolute;
top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);}

 

-css

関連記事

CSS Transitionで手軽にアニメーションを取り入れたい

CSSのアニメーション、Transitionに変化を追加してオンマウスで滑らかに変化させたり、押す感を出せたり。これだけでちょっとインタラクティブなサイトになりますね!

CSSで縦書き

縦書き 文章を縦書きにして右から左へ流す。 縦書きの基本 文章を縦書きにして右から左へ流す。 親{text-align:right; display: inline-block;} 子{writing …

テキストに縁や影をつける

cssでテキストに縁や影をつけます。

隣接セレクタ・間接セレクタ・直下セレクタでCSSを記述したい

隣接セレクタ・間接セレクタ・直下セレクタとは? 隣接セレクタ 要素を結合子「+」でつなぎます。例えば要素A+要素Bの場合、要素Aと同じ階層にあるすぐ後の要素Bにスタイルがつきます。 間接セレクタ 要素 …

スマホ対応の見やすい表を作りたい! tableのCSS設定

よく使うtableのCSSデザイン サイト制作の会社概要や比較表、料金表などでよく使うtable。css設定についてまとめました。例にあげたのは、全部tdの場合です。thが入ると変わってくるものもあり …