More than 5 years have passed since last update.

【CSS】要素の中央寄せ【備忘録】

Posted at 2020-02-04

中央寄せしなければならない時に、毎回調べてるので備忘録

ブロック要素

sample.css

/* 色、幅、高さの記述は省略 */
.contentA{
  /* 親要素 */
  display: flex;
  align-items: center;
}

.contentB{
  /* 子要素 */
  margin: 0 auto;
}

sample.html

<body>
  <div class="contentA">
    <div class="contentB"></div>
  </div>
</body>

インライン要素をdivで囲ってあげる

sample.css

/* 色、幅、高さの記述は省略 */
.contentA{
  /* 親要素 */
  display: flex;
  align-items: center;
}

.contentB{
  /* 子要素 */
  margin: 0 auto;
}

/* ボタンの位置設定は特になし */

sample.html

<body>
  <div class="contentA">
    <div class="contentB">
      <input type="button" value="テストボタン">
    </div>
  </div>
</body>