ブートストラップ4、ボタンを中央揃えにするにはどうすればよいですか？

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-8">
      <div v-for="job in job">
        <div class="text-center">
          <h1>{{ job.job_title }}</h1>
          <p><strong>Google Inc. </strong> - {{ job.location }}</p>
          <h2><u>Job Description</u></h2>
        </div>
        <p v-html="desc"></p>
        <p class="text-center">Posted: {{ formatDate(job.date_created) }}</p>
        <button v-on:click="applyResume()" id="apply-btn" class="btn btn-primary">{{ buttonText }}</button>
      </div>
    </div>
    <div class="hidden-sm-down col-md-4"></div>
  </div>
</div>

このボタンを中央に配置する方法がわかりません。BS 3ではセンターブロックを使用しますが、BS4ではそれはオプションではありません。何かアドバイス？

Bootstrap 4では、text-centerクラスを使用してインラインブロックを整列させる必要があります。

注：text-align:center;親要素に適用するカスタムクラスで定義されているものは、使用しているBootstrapのバージョンに関係なく機能します。そしてそれがまさに.text-center当てはまります。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col text-center">
      <button class="btn btn-default">Centered button</button>
    </div>
  </div>
</div>

中央揃えにするコンテンツがブロックまたはフレックス（ではないinline-）の場合、flexboxを使用して中央揃えにすることができます。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="d-flex justify-content-center">
  <button class="btn btn-default">Centered button</button>
</div>

...これはdisplay: flex; justify-content: center親に適用されます。

注：使用しない.row.justify-content-center代わりに.d-flex.justify-content-center、として.row（ない限り、これは予想外の水平スクロールバーへの結果、特定の応答間隔に負のマージンを適用する.rowの直接の子である.container正しい応答間隔に、負のマージンを打ち消すために、横方向のパディングを適用し、）。.row何らかの理由でを使用する必要がある場合は、そのマージンとパディングを.m-0.p-0でオーバーライドします。その場合、はとほぼ同じスタイルになります.d-flex。

重要な注意： 2番目の解決策は、中央のコンテンツ（ボタン）が親の幅（）を超える.d-flex場合、特に親がビューポートの幅を持っている場合、特にコンテンツの先頭まで水平方向にスクロールできないため（左-最も）。
したがって、中央に配置するコンテンツが使用可能な親の幅よりも広くなる可能性があり、すべてのコンテンツにアクセスできる必要がある場合は、これを使用しないでください。

ブートストラップでこれを試してください

コード：

<div class="row justify-content-center">
  <button type="submit" class="btn btn-primary">btnText</button>
</div>

リンク：

https://getbootstrap.com/docs/4.1/layout/grid/#variable-width-content

これは、form-groupを閉じた後にBootsrapフォームのボタンで中央揃えにするために使用する完全なHTMLです。

<div class="form-row text-center">
    <div class="col-12">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
 </div>

ブートストラップ4ユーティリティを使用すると、水平方向のマージンを「自動」に設定することで、要素自体を水平方向に中央揃えできます。

水平マージンを自動に設定するには、を使用できますmx-auto。mマージンを参照して、xX軸（右+左）を参照し、auto設定を参照します。したがって、これにより、左マージンと右マージンが「自動」設定に設定されます。ブラウザはマージンを均等に計算し、要素を中央に配置します。この設定はブロック要素でのみ機能するため、display：blockを追加する必要があり、ブートストラップユーティリティを使用するとこれはによって行われd-blockます。

<button type="submit" class="btn btn-primary mx-auto d-block">Submit</button>

この回答に従って、すべてのブラウザが自動マージン設定を完全にサポートしていると見なすことができます。マージンのブラウザサポート：自動なので、安全に使用できます。

ブートストラップ4クラスtext-centerも非常に優れたソリューションですが、親ラッパー要素が必要です。自動マージンを使用する利点は、ボタン要素自体で直接実行できることです。

text-centerBootstrap4の親コンテナでクラスを使用する

私のために働いたのは（あなたのcssパスに「css / style.css」を適応させる）：

ヘッドHTML：

 <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

本文のHTML：

 <div class="container">
  <div class="row">
    <div class="mycentered-text">
      <button class="btn btn-default"> Login </button>
    </div>
  </div>
</div>

Css：

.mycentered-text {
    text-align:center
}

折りたたまれたナビゲーションバーのボタンの場合、上記の何も機能しなかったので、cssファイルで実行しました.....

.navbar button {
    margin:auto;
}

そしてそれはうまくいきました！

テキストセンター属性を持つHクラスまたはPクラスでラップすることもできます