如何使用html或css使div居中

Question

我有显示在页面左侧的 div，我想将它们显示在页面的中心，我还附上了我的 div 的屏幕截图：     $array = [    'Summary' => [      'data' => '<div align="center"style="display: inline-block;width: 10%;" class="page_sum"><h1>Scan Summary:</h1></div>                <div class="page_summary"><br/>                    <div><h3 style="display: inline-block;width: 10%;" class="total_found">Total Files Found: '.$totalFind.'</h3></div>                    <div><h3 style="display: inline-block;width: 10%;" class="total_dir">Total Directories: '.$totalIsDir.'</h3><br/></div>                    <div><h3 style="display: inline-block;width: 10%;" class="planned_sync">Planned Sync Files: '.$totalShouldFind.'</h3></div>                    <div><h3 style="display: inline-block;width: 10%;" class="actual_sync">Actual Synced: '.$totalResolved.'</h3><br/></div/>                    <div><h3 style="display: inline-block;width: 10%;"class="missing_sync">Missing Synced Files: '.$forOfor.'</h3><div/>',      'colspan' => 5, 'class' => array('foo', 'bar'),    ],  ];和我的CSS： .page_sum{ width: 100px; height: 50px;  display: inline-block; } .page_sum { /* Using drop shadow, should appear identical to box shadow */  -webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);  -moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);  box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);  background: #cccccc; }我刚刚粘贴了一个 div css，而不是将 div 置于中心，而是将文本显示到 div 中的中心。如何让我的 div 居中？还请找到我的屏幕。CSS：    .page_sum{    width: 100px;    height: 50px;    display: inline-block;    } .page_sum { /* Using drop shadow, should appear identical to box shadow */  -webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);  -moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);     box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);     background: #cccccc;   }  .summary-center {   margin: auto;   width: 50%;    }和 HTML：    '<div class="summary-center" style="display: inline-block;width: 10%;" class="page_sum"><h1>Scan Summary:</h1></div>

Answer 1

.page_sum如果您在 div和 div 中添加类 .summary-center ，.page_summary它应该可以工作。

.summary-center {
  margin: auto;
  width: 50%;
}

Answer 2

.center {

    display: flex;

    justify-content: center;

    align-items: center;

}

Answer 3

尝试这个：

<div class="page_summary summary-center">

  <h1>Scan Summary:</h1>

  <br/>

  <div>

    <h3 style="display: inline-block; width: 10%;" class="total_found page_sum">Total Files Found: XX</h3>

  </div>

  <div>

    <h3 style="display: inline-block; width: 10%;" class="total_dir page_sum">Total Directories: XX</h3>

    <br/>

  </div>

  <div>

    <h3 style="display: inline-block; width: 10%;" class="planned_sync page_sum">Planned Sync Files: XX</h3>

  </div>

  <div>

    <h3 style="display: inline-block; width: 10%;" class="actual_sync page_sum">Actual Synced: XX</h3>

    <br/>

  </div>

  <div>

    <h3 style="display: inline-block; width: 10%;"class="missing_sync page_sum">Missing Synced Files: XX</h3>

  </div>

</div>

<style>

  .page_sum {

    /* Using drop shadow, should appear identical to box shadow */

    -webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);

    -moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);

    box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);

    background: #cccccc;

  } 

  .summary-center {

    margin: auto;

    width: 50%;

    text-align: center;

  }

</style>

这看起来如下：