divを中央揃えにしていません

Question

divを中心にしてmargin:--px autoを与えて魔法を使いましたが、動作しません。何が問題なの？

https://jsfiddle.net/1zptxa7h/3/

<div class="single-view-container" style="display: block;"> 
    <div id="single-view" class="single-view grid-100 grid-parent">center me</div> 
</div> 

    .single-view-container { 
     position: absolute; 
     left: 0; 
     right: 0; 
     top: 0; 
     bottom: 0; 
     z-index: 3; 
     overflow: auto; 
     background: rgba(0, 0, 0, 0.3); 
     display: none;} 

    .single-view { 
     color: white; 
     max-width: 100px; 
     width: 100%; 
     display: inline-block; 
     margin: 20px auto; 
     height:100px; 
     background:red; 
     box-shadow: 0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02); 
     border-radius: 2px; 
     padding-bottom: 10px; 
    } 

Answer 1

固定幅のブロック要素のmargin: 0 auto仕事に、あなたはdisplay: blockに変更（またはそれがdivのデフォルトであるとして、それを完全に削除します）ので、もし期待どおりに動作します。

注：inline要素（またはinline-block）を中央に配置する場合は、その親にtext-align: centerを設定してください。

.single-view-container { 
 
     position: absolute; 
 
     left: 0; 
 
     right: 0; 
 
     top: 0; 
 
     bottom: 0; 
 
     z-index: 3; 
 
     overflow: auto; 
 
     background: rgba(0, 0, 0, 0.3); 
 
     display: none;} 
 

 
    .single-view { 
 
     color: white; 
 
     max-width: 100px; 
 
     width: 100%; 
 
     display: block; 
 
     margin: 20px auto; 
 
     height:100px; 
 
     background:red; 
 
     box-shadow: 0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02); 
 
     border-radius: 2px; 
 
     padding-bottom: 10px; 
 
    }

<div class="single-view-container" style="display: block;"> 
 
    <div id="single-view" class="single-view grid-100 grid-parent">center me</div> 
 
</div>

Answer 2

あなたはdisplay: inline-blockマージンautoに要素を変更すると、もはやそれはあなたがその親午前を行う必要があり、インライン要素だとしてtext-align: center;

.single-view-container { 
    text-align: center; 
} 

Answer 3

があなたのCSSを変更してきた作品.single-view with this：

.single-view { 
    color: white; 
    text-align: center; 
    max-width: 100px; 
    width: 100%; 
    display: inline-block; 
    margin: 20px auto; 
    height:100px; 
    background:red; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02); 
    border-radius: 2px; 
    padding-bottom: 10px; 
} 

Answer 4

JSFiddle。

追加、

text-align:center; 
    display:block; 

HTML：

<div class="single-view-container" style="display: block;"> 
    <div id="single-view" class="single-view grid-100 grid-parent">center me</div> 
</div> 

CSS：

.single-view-container { 
     position: absolute; 
     left: 0; 
     right: 0; 
     top: 0; 
     bottom: 0; 
     z-index: 3; 
     overflow: auto; 
     background: rgba(0, 0, 0, 0.3); 
     display: none;} 

    .single-view { 
     color: white; 
     max-width: 100px; 
     width: 100%; 
     margin: 20px auto; 
     height:100px; 
     background:red; 
     box-shadow: 0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02); 
     border-radius: 2px; 
     padding-bottom: 10px; 
     text-align:center; 
     display:block; 
    } 

Answer 5

中心。

#single-view { 
 
    width:200px; 
 
    background: green; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
}

<div id="single-view">center me</div>

Answer 6

あなたは、ブートストラップを使用していますか？それを中心にするためにあなたの要素 "テキストセンター"を入れてください。

<div class="single-view-container text-center" style="display: block;"> 
    <div id="single-view" class="single-view grid-100 grid-parent">center me</div> 
</div>