高さがわからない要素に、高さがわからない要素を天地中央にする
最近はメインビジュアルを画面いっぱいにして、天地中央にロゴや要素を配置するデザインが流行っています。
そんなときにどのようにして中央に要素を配置していますか？
- 画面の高さが変われば、中央に配置する親の要素の高さも変わる
- 配置する要素の高さもレスポンシブで変化する
そんなときは下記のコードを使用しましょう。
親要素には下記cssを。
cssに記載
|
1 2 3 |
.oya { position: relative; } |
中央に配置する要素には下記cssを。
cssに記載
|
1 2 3 4 5 6 7 |
.chuou { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } |
oyaの天地中央にchuouが配置されています。