flexboxによる上下、左右センタリング(中央寄せ)
justify-content: center;
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>