行内にdivを中央に配置する方法

Question

親から継承した幅が1172pxの行があります。私は列の中のdivを宣言し、私はそれを整列させる中心にしたい。私はmargin: 0 autoとtext-align:centerを使ってみましたが動作しませんでした。それをどのように中心に置くのですか？

<div class="row"> 
    <div id="YelloBox" class="YelloBox"> 
    </div>      
</div> 

CSS：

.YelloBox { 
    width: 515px; 
    height: 602px; 
    opacity: 0.3; 
    background-color: #ffffff; 
    background-color: var(--white); 
    border: solid 1px #a28c77; 
    border: solid 1px var(--reddish-grey); 
    text-align: center; 
    margin: 0 auto; 
} 

Answer 1

ただ、CSS

.YelloBox { 
 
    width: 515px; 
 
    height: 602px; 
 
    opacity: 0.3; 
 
    background-color: #ffffff; 
 
    background-color: var(--white); 
 
    border: solid 1px #a28c77; 
 
    border: solid 1px var(--reddish-grey); 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    display: table; 
 
}

Answer 2

に display:tableを追加

私はこれがあなたがアライメントを完全に理解するのに必要なものだと思います。彼らはかなり良いとインタラクティブなものを持っているデモの原因を見て、遊ぶ。

http://www.w3schools.com/cssref/css3_pr_flex.asp

それは一部のブラウザでは失敗する可能性があるため、Flexはまた、同じことを行うが、プロパティのサポートページを読むことができます。

http://caniuse.com/#search=flex

Answer 3

だけcenter-blockクラスを使用します。

<div class="row"> 
    <div id="YelloBox" class="YelloBox center-block"></div> 
</div> 

詳細はhereを参照してください。