CSSで要素を中央寄せにする方法

text-alignで中央揃え

h1 {
  text-align: center; 
}

英文をtext-align: center; するなら、text-wrap: balanceも指定しておくと、各行の文字数が均等になるように折り返されます。

h1 {
  text-align: center; 
  text-wrap: balance;
}

margin: 0 auto;で中央揃え

margin: 0 auto;

position: absolute; で中央揃え

.container {
  position: relative; /* 子要素の絶対配置を相対的に制御するために、親要素を相対位置に設定 */
}
.child {
  position: absolute; /* 親要素に対して絶対位置を設定 */
  top: 50%;           /* 親要素の高さの50%位置に配置 */
  left: 50%;          /* 親要素の幅の50%位置に配置 */
  transform: translate(-50%, -50%); /* 子要素の中央を親要素の中央に合わせるために、子要素自身の幅と高さの50%分を逆方向に移動 */
}

または、

.container {
  position: relative; /* 子要素の絶対配置を相対的に制御するために、親要素を相対位置に設定 */
}
.child {
  position: absolute; /* 親要素に対して絶対位置を設定 */
	inset: 0;
	margin: auto;
}

または,

.container {
  position: relative; /* 子要素の絶対配置を相対的に制御するために、親要素を相対位置に設定 */
}
.child {
  position: absolute; /* 親要素に対して絶対位置を設定 */
	inset: 50% auto auto 50%;
	trancelate: -50% -50%;
}
/* 子要素が親要素より大きくても中央に配置できる */

display: flex; で中央揃え

.container {
  display: flex;           /* Flexboxコンテナとして設定 */
  justify-content: center; /* コンテナ内の子要素を水平中央揃え */
  align-items: center;     /* コンテナ内の子要素を垂直中央揃え */
}

display: grid;で中央揃え

.container {
  display: grid;        /* グリッドレイアウトを使用 */
  place-items: center;  /* グリッド内のアイテムを水平・垂直の両方で中央に配置 */
}

リンクボタンのテキスト中央寄せと右端にアイコンのデザイン

inline-gridを使う方法

See the Pen Button Component by tak-dcxi (@tak-dcxi) on CodePen.