scss 中央寄せ色々

Posted 2021-05-17

中央寄せ色々
------


A [Pen](https://codepen.io/anonie/pen/QWLqqJr) by [anonie](https://codepen.io/anonie) on [CodePen](https://codepen.io).

[License](https://codepen.io/anonie/pen/QWLqqJr/license).
  
  
  
### [CSSで要素を上下や左右から中央寄せする7つの方法](https://www.granfairs.com/blog/staff/centering-by-css)

<div class="inner">
	<div class="item item01">
		item01：天地左右中央
	</div>
	<div class="item item02">
		item02：左右中央
	</div>
	<div class="item item03">
		<p>
		item03：コンテンツ幅依存左右中央
		</p>
	</div>
	<div class="item item04">
		<p>
		item04：天地中央tablecell<br>
		内容物よりも高さがあるブロックに有効
		</p>
	</div>
</div>
	

*, *::before, *::after {  box-sizing: border-box; }
body { background: #eee; }
.flex { display: flex; }
.inner {
	width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
.inner { background: #fff; margin: 3rem auto; } // 視認性用

.item {  // 視認性用
	border: 3px solid #aaa;
	margin-bottom: 2rem;
}
.item02 {  // 視認性用
	border: 3px solid #ccc;
}
@mixin media($breakpoint) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

/// 以下モジュール ---------------------------------
.inner {
	min-height: 300px;
	position: relative;
}
.item01 {
	width: 50%;
	height: 50%;
	
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
}
.item02 {
	max-width: 50%;
	width: 50%;
	height: 50%;
	margin: 0 auto;
}
.item03 {
	margin-top: 2rem; // 視認性用
  text-align: center;
	& > p {
		background: #eee; // 視認性用
		display: inline-block;
		text-align: left;
	}
}
.item04 {
	margin-top: 300px; // 視認性用
  display: table;
  width: 100%;
	height: 100px;
	& > p {
		display: table-cell;
		vertical-align: middle;
	}
}