0

コンテンツを画面の中央(上下左右)に配置する方法

コンテンツを画面の中央(上下左右)に配置する方法

以前にも一度、画面中央配置の記事を書かせていただきました。「特定の要素を画面の中央(上下左右)に配置する方法」こちらは「display:table-cell」を扱った中央配置の方法でしたが、今回はCSSのみで実現できる方法になります。




まずはデモサンプルを確認してみてください。

デモサンプル

center-img

それでは見ていきましょう。

HTMLを記述

CSSを記述

中央に配置するコンテンツのサイズは任意で調整してみてください。CSSのみで画面中央寄せができるのでこちらも活用できそうですね。

以上になります。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > コンテンツを画面の中央(上下左右)に配置する方法