自分用CSSチートシート

フレックスボックス

between / left / center / right
そして2～6個までの div と li 対応

/* ---flex--- */
.flex-between,
.flex-left,
.flex-center,
.flex-right {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	-flex-pack:justify;
	-ms-flex-wrap:wrap;
	flex-wrap: wrap;
}
/* ---between--- */
.flex-between {
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
/* ---left--- */
.flex-left {
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}
/* ---center--- */
.flex-center {
	-webkit-justify-content: center;
	justify-content: center;
}
/* ---right--- */
.flex-right {
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}
.flex-two > div,
.flex-two > li {
	width: 48.7%;
	margin: 0 1.3%;
}
.flex-three > div,
.flex-three > li {
	width: 31.5%;
	margin: 0 1.375%;
}
.flex-four > div,
.flex-four > li {
	width: 23%;
	margin: 0 1.33%;
}
.flex-five > div,
.flex-five > li {
	width: 18%;
	margin: 0 1.25%;
}
.flex-six > div,
.flex-six > li {
	width: 15%;
	margin: 0 1%;
}
.flex-two > div:first-of-type,
.flex-three > div:first-of-type,
.flex-four > div:first-of-type,
.flex-five > div:first-of-type,
.flex-two > div:nth-of-type(odd),
.flex-three > div:nth-of-type(3n + 1),
.flex-four > div:nth-of-type(4n + 1),
.flex-five > div:nth-of-type(5n + 1),
.flex-six > div:nth-of-type(6n + 1),
.flex-two > li:first-of-type,
.flex-three > li:first-of-type,
.flex-four > li:first-of-type,
.flex-five > li:first-of-type,
.flex-six > li:first-of-type,
.flex-two > li:nth-of-type(odd),
.flex-three > li:nth-of-type(3n + 1),
.flex-four > li:nth-of-type(4n + 1),
.flex-five > li:nth-of-type(5n + 1),
.flex-six > li:nth-of-type(6n + 1) {
	margin-left: 0;
}
.flex-two > div:nth-of-type(2n),
.flex-three > div:nth-of-type(3n),
.flex-four > div:nth-of-type(4n),
.flex-five > div:nth-of-type(5n),
.flex-six > div:nth-of-type(6n),
.flex-two > li:nth-of-type(2n),
.flex-three > li:nth-of-type(3n),
.flex-four > li:nth-of-type(4n),
.flex-five > li:nth-of-type(5n),
.flex-six > li:nth-of-type(6n) {
	margin-right: 0;
}

<ul class="flex-between flex-three">
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

サムネイルを背景画像にし、 cover で

これにより、大きさの違う画像を指定した場合でも比率そのまま、レスポンシブも楽に。

/* ---thumb--- */
.thumb {
	display: block;
	position: relative;
	width: 100%;
}
.thumb:before {
	content:"";
	display: block;
	padding-top: 100%; /* thumbの幅に対する高さの比率。埋め込み動画16:9のとき 9/16*100=56.25 */
}
.thumb > div {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: transparent;
}

<div class="thumb">
  <div style="background-image:url(ここに画像URL);"></div>
</div>

天地左右・もしくは天地のみ中央

position : absolute を使うやり方。
display : table の中に display : table-cell を指定して vartical-align : middle にするやり方や、
フレックスボックスの align-items : center にするやり方もあるけど、ブロック要素なら以下が汎用性がきく気がするので。

天地左右中央

親 {
	position: relative;
}
子 {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

天地中央

親 {
	position: relative;
}
子 {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}