チェックボックスごと中央にしたい

Question

チェックボックスでチェックを入れると表示するよう設定しました。
チェックボックスごと　中央にしたいのですが、わからなくなりました。
教えて頂きたいです。

/** チェックOFFなら非表示 */
.message{ 
  display: none;
}
/** チェックONなら表示 */
input:checked ~ .message{
  display: block;
}
 
/** チェックボックス横にラベル表示 */
[type="checkbox"].toggle{
  position: relative;
}
[type="checkbox"].toggle:after{
  content: "xxxxxxx";
  font-size: 16px;
  position: absolute;
  width: 300px; height: 20px;
  padding-left: 20px;
  top: 30%;
  transform: translateY(-50%);
}

<input type="checkbox" class="toggle"/>
 
<div class="message">

<p style="text-align: left; margin-top:10px; ">xxxxxx</p>
<ul class="item_list column1">xxxxxx</ul>

</div>

Comments

[m.ts10806]

コードはマークダウンのcodeにてご提示ください。
参考https://teratail.com/questions/238564

あと、JSPは本件とどう関係するのでしょうか

[mabou]

申し訳ありませんcodeの使い方がやっとわかりました。
ありがとうございます。
jspも関係なかったので、削除致しました。

Answer 1

こうしてみてはどうでしょうか。
（.toggleと.messageの親要素がbodyの場合）

body {
	display: grid;
	grid-template-columns: max-content;
	justify-content: center;
}

Comments

[mabou]

ありがとうございます！
divでくくってこちらを当てはめてみました。
ちゃんとできました。
助かりました。

[Lhankor_Mhy]

お役に立てたようで何よりです