bootstarp、css: 天地中央、中心揃え、inline時の左右余白関連 / cheatsheet

チートシート

※『「position: absolute」+「margin」』や『「position: absolute」+「transform」』は後述

横方向	指定	左	中心	右
基本	text-align	text-align: left;	text-align: center;	text-align: right;
「display:flex;」と一緒に指定	justify-content	justify-content: flex-start;	justify-content: center;	justify-content: flex-end;
Bootstrapのクラス	justify-content-xxx	class="d-flex justify-content-start"	class="d-flex justify-content-center"	class="d-flex justify-content-end"

縦方向	指定	上	中央	下
基本	vertical-align	vertical-align: top;	vertical-align: middle;	vertical-align: bottom;
「display:flex;」と一緒に指定	align-items	align-items: flex-start;	align-items: center;	align-items: flex-end;
Bootstrapのクラス	align-items-xxx	class="d-flex align-items-start"	class="d-flex align-items-center"	class="d-flex align-items-end"

※Bootstrapでのクラス指定する場合、「display:flex;」の指定が無い要素に対して設定する場合は「d-flex」をクラスに指定

「display:flex;」のときの記述例

「display:flex;」と一緒に指定する

.xxx {
	display:flex;
	justify-content: center;
}

ブロック要素などで指定

• 横方向関連は「text-align」を使う
• 縦方向関連は「vertical-align」を使う

「text-align」を使うとき

基本「left」「center」「right」を使う

「vertical-align」を使うとき

基本「top」「middle」「bottom」を使う

「display:flex;」で指定

• 横方向関連は「justify-content」を使う
• 縦方向関連は「align-items」を使う

「justify-content」「align-items」を使うとき

基本「flex-start」「center」「flex-end」を使う

bootstarpで指定

bootstarpの「display:flex;」を指定

「d-flex」というクラスが用意されている

bootstarpの「justify-content」「align-items」を指定

「justify-content-xxx」「align-items-xxx」というクラスが用意されている

• 「justify-content-xxx」は「justify-content:xxx;」が適用
• 「align-items-xxx」は「align-items:xxx;」が適用

「margin: 0 auto;」で左右中央

<div style="width:100px; margin: 0 auto;">xxxx</div>

※「margin: auto;」でもOK

「position: relative;」と「position: absolute;」+「margin: xxx」

親要素に対して「position: relative;」、子要素に対して「position: absolute;」を指定し、位置を天地・左右中央にする

html

<div style="position:relative; top:0; left:0;">
<div class="wrap_child">
</div>
</div>

左右中央にするときのCSS

.wrap_child{
	position: absolute;
	width: max-content;
	left: 0;
	right: 0;
	margin: 0 auto;
}

▼この組み合わせでもOK（天地中央も似たような感じ）
・「left:0; right:0; top:0; bottom:0;」にして「margin: 0 auto;」
・「left:0; right:0;」にして「margin: auto;」

天地中央にするときのCSS

.wrap_child{
	position: absolute;
	width: max-content;
	top: 0;
	bottom: 0;
	margin: auto 0;
}

天地左右中央にするときのCSS

.wrap_child{
	position: absolute;
	width: max-content;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

「position: relative;」と「position: absolute;」+「transform: xxx」

親要素に対して「position: relative;」、子要素に対して「position: absolute;」を指定し、位置を天地・左右中央にする

html

<div style="position:relative; top:0; left:0;">
<div class="wrap_child">
</div>
</div>

左右中央にするときのCSS

.wrap_child{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
}

天地中央にするときのCSS

.wrap_child{
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
}

天地左右中央にするときのCSS

.wrap_child{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

関連項目

• CSS「position:absolute」で中央配置