解説

指定されたボックスを親ボックスの中央(上下左右)配置させるための関数。
要素を親要素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 … 浅野 利博
新規作成

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.