How to make div into center using html or css - html

Question

I have divs which is displaying at the left side of the page i want to display them on center of the page I have also attached the screen shot of my divs:
$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'),
],
];
and my 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;
}
I have just pasted one div css, instead of making div into center it displaying the text into center which is in div. How can I make my divs into center?
Please also find my screen.
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%;
}
and html:
'<div class="summary-center" style="display: inline-block;width: 10%;" class="page_sum"><h1>Scan Summary:</h1></div>

Answer 1

if you add the class .summary-center in div .page_sum and in div .page_summary it should work.
.summary-center {
margin: auto;
width: 50%;
}

Answer 2

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

Answer 3

Try this:
<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>
This looks as follows: