CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。

Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記： 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！ 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg

[hosiken]

古いIEを切り捨てるといろいろ捗るんだな～と思うと、ほんとうに今までのあれこれは何だったんだろうという複雑な心境に

[feb223]

今時って書いてるけど2014年の記事だから古いな・・・ こっちの方が新しくて分かりやすいんでおすすめ。http://yoshiko-pg.github.io/slides/20151215-scripty/

[june29]

こういうのが2014年に出土してみんなが「ありがたやありがたや」ってなるの、とても工学分野とは思えない、考古学という感じがする。次から使います。ありがたや〜〜〜！

[burnworks]

なぜそうなるかは仕様書にある http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height 初期包含ブロック以外を基準に絶対配置したい場合は親要素にposition:relative等の指定必要

[cyokodog]

親のrelativeは必要　http://cyokodog.github.io/CSS_STUDY/demo.html#!Demo9

[mifio]

最近は親のposition:relativeがなくてもセンタリングできるやり方があるのか〜と思ったらそうじゃなかった。そして既に言われまくっていた。

[interstella]

えっ

[you1_t32]

なぜ上がった

[momijitan]

“left: -100%; right: -100%; bottom: -100%;”これが知りたかった…！！！

[aiza_wai]

親側を固定して、場所指定。手軽にやるならこれ。いつも都度検索してしまうので、忘れないように。

[sutara_lumpur]

#CSS 幅と高さが固定の場合は、これが一番楽だと感じました。

[pmakino]

widthやheightが確定しない要素には使えないのが難点

[naga_sawa]

ブロック要素センタリング

[sakura-box]

(´・ω・)φメモメモ

[abababababababa]

ほわー切り抜かれるのすごいｗ　φ(..)メモメモ

[kathew]

使ってみた。HTMLを一切汚さないのが素晴らしい

[coolpix]

画像の猫の目付きがなんか危ない

[fishbirdfish]

上下左右中央？ブロック要素とかはどうなんだろう？複数の要素が入ってる時は？

[tespple]

モダンブラウザだけでいいならこれではなくてFlexbox使おう…

[masayoshinym]

”CSSでblock要素を上下左右中央寄せ”

[o9ra]

css

[hidacchi]

上下左右中央寄せ

[shagggy]

これ知らなかったー！

[knakamura1977]

widthとheightの設定が必要なんだな。

[torimoku]

absoluteで要素センタリング（上下左右センター）

[tamuuu]

これはすごく簡単！

[jami_i]

“position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値”

[siriusant]

これは便利！

[lingling_yas]

“top: 0; left: 0; right: 0; bottom: 0; margin: auto;”

[fugashi]

上下中央揃えにするのにこんな方法あったのか…

[chott]

[]

[oki448jp]

ブロック要素を上下左右中央寄せ

[uchiuchiyama]

see also http://hyper-text.org/archives/2014/08/position_absolute_center_layout.shtml

[m_m3zono]

なぜ今頃…だけど、次からこれ使おう。仕様上の解説も合わせて読むべし。

[ytabuchi]

すごい！