如何使用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&nbsp;{ &nbsp;&nbsp;margin:&nbsp;auto; &nbsp;&nbsp;width:&nbsp;50%; }

Answer 2

.center {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; align-items: center;}

Answer 3

尝试这个：<div class="page_summary summary-center">&nbsp; <h1>Scan Summary:</h1>&nbsp; <br/>&nbsp; <div>&nbsp; &nbsp; <h3 style="display: inline-block; width: 10%;" class="total_found page_sum">Total Files Found: XX</h3>&nbsp; </div>&nbsp; <div>&nbsp; &nbsp; <h3 style="display: inline-block; width: 10%;" class="total_dir page_sum">Total Directories: XX</h3>&nbsp; &nbsp; <br/>&nbsp; </div>&nbsp; <div>&nbsp; &nbsp; <h3 style="display: inline-block; width: 10%;" class="planned_sync page_sum">Planned Sync Files: XX</h3>&nbsp; </div>&nbsp; <div>&nbsp; &nbsp; <h3 style="display: inline-block; width: 10%;" class="actual_sync page_sum">Actual Synced: XX</h3>&nbsp; &nbsp; <br/>&nbsp; </div>&nbsp; <div>&nbsp; &nbsp; <h3 style="display: inline-block; width: 10%;"class="missing_sync page_sum">Missing Synced Files: XX</h3>&nbsp; </div></div><style>&nbsp; .page_sum {&nbsp; &nbsp; /* Using drop shadow, should appear identical to box shadow */&nbsp; &nbsp; -webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);&nbsp; &nbsp; -moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);&nbsp; &nbsp; box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);&nbsp; &nbsp; background: #cccccc;&nbsp; }&nbsp;&nbsp; .summary-center {&nbsp; &nbsp; margin: auto;&nbsp; &nbsp; width: 50%;&nbsp; &nbsp; text-align: center;&nbsp; }</style>这看起来如下：