CSSを使用して最小幅のDivを水平方向に中央揃えにする方法は?

<div> の水平方向の中央揃えCSS を使用した最小幅の

<div> のカプセル化別の

<div> 内の要素正確な水平方向のセンタリングが可能になります。外側の <div> は内側の <div> は幅の制約を決定します。必要なコンテンツが含まれています。

<div> の場合可変幅の場合、次の CSS は最小幅を維持しながら水平方向の中央揃えを実現できます。

#wrapper {
  background-color: green; /* for visualization purposes */
  text-align: center;
}
#yourdiv {
  background-color: red; /* for visualization purposes */
  display: inline-block;
}

<div>

外側の <div> id="wrapper" を使用すると、視覚化のための背景色が設定され、text-align: center を使用してその中のテキストが中央に配置されます。内部の

<div> はid="yourdiv" には、わかりやすくするために背景色が割り当てられます。 display: inline-block を利用して、幅を調整する機能を保持しながらインライン要素としてレンダリングします。