WEB制作(html・css(スタイルシート))に関する各種メモ書き

flexboxによる上下、左右センタリング(中央寄せ)

flexboxによる上下、左右センタリング(中央寄せ)

● flexboxによる左右のセンタリング

	justify-content: center;

● flexboxによる上下のセンタリング

	align-items: center;

● サンプル

https://pgmemo.tokyo/data/filedir/1168_1.html

左右の センタリング用に .flex_center
上下左右の センタリング用に .flex_middle_center
を作成しています。

<style type="text/css">
*{
	box-sizing: border-box;
}
.flex_middle_center{
	display: flex;
    justify-content: center;
	align-items: center;
}
.flex_center{
	display: flex;
    justify-content: center;
}

.my_button{
	width: 200px;
	height: 60px;
}
</style>

<div class="flex_middle_center" style="height:500px;border: 5px solid red;">
    <button class="my_button">
    	<div class="flex_center" style="padding-top: 7px;">
	        <p style="font-size: 12px; float: left;">追加します</p>
	        <p style="font-size: 36px; float: left; margin-top: -4px;">+</p>
		</div>
    </button>
</div>

関連エントリー

添付ファイル1
No.1168
10/16 10:56

edit

添付ファイル

css