【レスポンシブ対応】プロから学ぶ!cssのみで要素を天地中央

2018/2/23 CSS

高さがわからない要素に、高さがわからない要素を天地中央にする

最近はメインビジュアルを画面いっぱいにして、天地中央にロゴや要素を配置するデザインが流行っています。

そんなときにどのようにして中央に要素を配置していますか?

  • 画面の高さが変われば、中央に配置する親の要素の高さも変わる
  • 配置する要素の高さもレスポンシブで変化する

そんなときは下記のコードを使用しましょう。

親要素には下記cssを。

cssに記載

中央に配置する要素には下記cssを。

cssに記載

これで親要素oyaの天地中央にchuouが配置されています。

投稿者:気まぐれWEBLOG管理人