html - 居中 div 不起作用

Question

我通过给它一个 margin:--px auto 来使 div 居中，但它不起作用。这可能是什么问题？

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 适用于具有固定宽度的 block 元素，因此如果您更改为 display: block(或完全删除它，因为它是div) 它将按预期工作。

旁注:如果要使 inline 元素(或 inline-block)居中，请将 text-align: center 设置为它的 parent 。

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