Center a div on page - html

Question

I have this div i want to center on my page as shown in the code bellow, the problem is that i am trying to add "class="center"" to each div but i cant center the whole box, anyone know why it wont center?
<div style="text-align: center;" class="pricing-table">
<?php foreach ($days AS $k => $day): ?>
<div class="col-md-5ths col-xs-6">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="text-center"><strong><?php echo UCWords(t('BUY', 'BUY')); ?></strong><br/><?php echo UCWords(t('SUBDOMAIN', 'SUBDOMAIN')); ?></h3>
</div>
<div class="panel-body text-center">
<p class="lead total-price" style="font-size:40px"><strong><?php echo SITE_CONFIG_COST_CURRENCY_SYMBOL; ?><?php echo number_format(str_replace(",", "", constant('SITE_CONFIG_COST_FOR_' . $day . '_DAYS_PREMIUM')), 2); ?></strong></p>
<p class="lead price-per-day" style="font-size:16px">
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="fa fa-lock"></i> <?php echo UCWords(t('secure_payment', 'secure payment')); ?></li>
<li class="list-group-item"><i class="fa fa-eye-slash"></i> <?php echo UCWords(t('safe_and_anonymous', '100% Safe & Anonymous')); ?></li>
</ul>
<div class="panel-footer">
<?php
pluginHelper::outputPaymentLinks($day);
?>
</div>
</div>
</div>
<?php endforeach; ?>
<div class="clear"></div>
</div>

Answer 1

You can try flexbox. Something like the following code.
.center {
display: flex;
justify-content: center;
align-items: center;
}

Answer 2

Your code is already centered, which means the classes you have added but not included in your question are overriding your changes.
I strongly recommend that you use classes for styling and remove all inline styling (style="")as this have higher specificity causing overwrites.
<div style="text-align: center;" class="pricing-table">
<div class="col-md-5ths col-xs-6">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="text-center"><strong>BUY</strong><br/>SUBDOMAIN</h3>
</div>
<div class="panel-body text-center">
<p class="lead total-price" style="font-size:40px"><strong>SAMPLE</strong></p>
<p class="lead price-per-day" style="font-size:16px">
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="fa fa-lock"></i></li>
<li class="list-group-item"><i class="fa fa-eye-slash"></i> </li>
</ul>
<div class="panel-footer">
FOOTER
</div>
</div>
</div>
</div>
MY RECOMMENDED METHOD
.pricing-table {
background: #eee;
}
.panel {
display: flex;
flex-direction: column;
align-items: center;
}
.text-center {
text-align: center;
}
.total-price {
font-size: 40px;
}
.price-per-day {
font-size: 16px;
}
<div class="pricing-table">
<div class="col-md-5ths col-xs-6">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="text-center"><strong>BUY</strong><br/>SUBDOMAIN</h3>
</div>
<div class="panel-body text-center">
<p class="lead total-price"><strong>SAMPLE</strong></p>
<p class="lead price-per-day">
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="fa fa-lock"></i></li>
<li class="list-group-item"><i class="fa fa-eye-slash"></i></li>
</ul>
<div class="panel-footer">
FOOTER
</div>
</div>
</div>
</div>

Answer 3

<div style="text-align: center;"></div>
Or(You need to have a css document)
HTML
<link rel="stylesheet" type="text/css" href="Style.css">
<div class="center">
CSS
.center{
text-align: center;
}