解説
指定されたボックスを親ボックスの中央(上下左右)配置させるための関数。要素を親要素topから50%に配置、すると子要素のtopが親要素の中央位置にくるので、
子要素を自身の高さの半分マイナス上にずらす(transform: translateY(-50%))と、縦のセンタリングができる。
更新日:2017年3月26日
使用方法
使用方法
@include box_center()
パラメタ
なし。
戻り値
なし。
コード
Calc代用関数
/*----------------------------------------------------------------------------------------------------------
BOX中央配置関数
説明:
要素を親要素topから50%に配置、すると子要素のtopが親要素の中央位置にくるので、
子要素を自身の高さの半分マイナス上にずらす(transform: translateY(-50%))と、縦のセンタリングができる。
width ... 自身の幅
height ... 自身の高
parent_width ... 親要素の幅
parent_height ... 親要素の高
translateX() = ( parent_width / 2 ) + ( width * -0.5 );
translateY() = ( parent_height / 2 ) + ( height * -0.5 );
注意事項:
※親要素の高さが決まっている時のみ適用される。
参照: https://inside-research.com/6018/sass-box%E4%B8%AD%E5%A4%AE%E9%85%8D%E7%BD%AE%E9%96%A2%E6%95%B0
----------------------------------------------------------------------------------------------------------*/
@mixin box_center()
{
position: absolute;
top: 50%;
left: 50%;
@include translate( -50%, -50% );
}
必須要素
情報
- Compassを用いること。
注意事項
なし。
更新履歴
- 2017/03/11 … 浅野 利博
- 新規作成