центрирование 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 маржинального авто больше не работает, как это встроенный элемент вам нужно сделать его родительские утра уже text-align: center;

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

Answer 3

Измените CSS .single-view с этим:

.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>