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

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

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




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

デモサンプル

center-img

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

HTMLを記述

CSSを記述

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

以上になります。

 

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