[解決済み] How do you easily horizontally center a <div> using CSS? [duplicate]

Question

I'm trying to horizontally center a <div> block element on a page and have it set to a minimum width. What is the simplest way to do this? I want the <div> 要素は、私のページの他の部分とインラインになるようにします。例を描いてみます。

page text page text page text page text
page text page text page text page text
               -------
               | div |
               -------
page text page text page text page text
page text page text page text page text

解決方法は？

の場合 非固定幅 div がどの程度のスペースを占めるかわからない場合。

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

<div id="wrapper">    
    <div id="yourdiv">Your text</div>
</div>

の幅に注意してください。 #yourdiv は動的で、中のテキストに合わせて伸びたり縮んだりします。

でブラウザの互換性を確認することができます。 カニース