absoluteでの基礎的な配置を学ぼう

absoluteでの様々な基本的な配置を学びましょう

左上配置

.text-top-left {
	position: absolute;
	top: 10px;
	left: 10px;
}

上真ん中配置

.text-top-center {
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
}

右上配置

.text-top-right {
	position: absolute;
	top: 10px;
	right: 10px;
}

真ん中左配置

.text-middle-left {
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
}

真ん中配置

.text-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

真ん中右配置

.text-middle-right {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
}

左下配置

.text-bottom-left {
	position: absolute;
	bottom: 10px;
	left: 10px;
}

真ん中下配置

.text-bottom-center {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
}

右下配置

.text-bottom-right {
	position: absolute;
	bottom: 10px;
	right: 10px;
}

まとめ

以上が基本的なabsoluteの配置コードになります。
プログラムでもそうですがこういうのはコードを覚えなくてもいいと思ってください
こういうことができると言うことを覚えておくのが一番大事なんです。