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

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

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

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

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

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

親要素には下記cssを。

cssに記載

.oya {
  position: relative;
}

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

cssに記載

.chuou {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

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