2019.12.19Web開発CSSで左右を中央寄せにする方法は簡単ですが、上下左右を中央寄せするのは意外と難しいものです。今回は私がよく使うCSSのコードを紹介致します。CSSのみで要素を上下左右に中央寄せにする基本的に上下左右を中央寄せする様なシーンは親要素に対して小要素(文字や画像)を中央に置く場合だと思います。左右を中央寄せし上下にはpaddingで余白をとり上下左右の中央に配置する方法がよく使用されますが、汎用性が乏しいところに難点があります。縦幅を一定の高さを保つ場合や、文字の改行、背景画像の大きさに寄って余白を綺麗に保つのは困難です。いった場合、私がよく使うのは下記のコードです。translateX(-50%);}これは親要素の左上を基点に、50%ずつズラして配置し小要素の上下左右の50%分を戻すという方法です。この方法のメリットは小要素の大きさが変わっても必ず中央に配置できる点です。応用また違った配置もこの方法だと簡単にできます。下に寄せて左右中央に配置する場合は下記のコードに修正します。translateX(-50%);}下に固定なのでtransformYを記述せずbottomを0にするだけです。これの方法であれば上下左右のどこかに固定しながら常に中央に配置することも可能です。今月の人気記事2020年流行?font-familyのオススメ設定はこれ!【CSS】2017.06.25【リッチなサイトへ】おしゃれなCSSアニメーションサンプル10選2018.05.17現役Web開発者がおすすめするAtom拡張パッケージ17選2019.05.25とにかく”映え”てしまう。現役Web開発者がおすすめするAtom拡張パッケージ17選2019.05.25【Homebrew】よく使うbrewコマンドまとめ2020.02.07思わず見入ってしまう!おしゃれすぎるWebサイトまとめ【10選】2017.08.29Webデザイン・制作を勉強したい方にオススメの参考サイトまとめ2018.01.29【クリック率倍増!】CTAのボタンの見直すべきポイント2017.10.16おすすめタグ解説まとめおすすめ映画WEBアプリfontWordPressテーマAtom用語SEO対策font-family2017洋画アクションランキングAnyushuについて主に映画とWebについての記事を投稿するブログ「Anyushu」です。現役のWebエンジニアが記事を更新しています。