上下センター揃え
フレックスボックス
「display: flex」を使います。
|
1 2 3 |
セレクタ{display: flex; justify-content: center; align-items: center;} |
左右センターは「justify-content: center;」、上下センターは「align-items: center;」で揃えます。
インライン要素の場合
|
1 2 |
セレクタ{display: inline-block; vertical-align: middle;} |
テーブル要素にする
|
1 2 3 |
親{display: table;} 子{display: table-cell; vertical-align: middle;} |
「absolute」を使う①
widthとheightを設定できるならこちら！
|
1 2 3 4 5 6 7 |
親{position:relative;} 子{position:absolute; top:0; bottom:0; right:0; left:0; margin:auto;} |
「absolute」を使う②
widthとheightを指定できないときはこちら！
|
1 2 3 4 5 6 |
親{position:relative;} 子{position:absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%);} |
