Unable to center DIVs within HTML Form - html

Question

I've had no luck trying to center these 2 divs. I've tried the suggestion in this SO post with no success. I've also experimented with margin: auto and width: 50%. That gets me close, but it's not very centered, and when I adjust the width, the Disabled switch div ends up wrapping awkwardly to the next line, in spite of trying text-align: center.
<form method="post" action="Invitation.php" onsubmit="return checkForm(this)">
<div style="width: 100%">
<div style="margin-left:auto;margin-right:auto">
<!-- Manual switch -->
<div class="flipswitch" style="float: left">
<input type="checkbox" name="flipswitchRecurring" id="flipswitchRecurring" class="flipswitch-cb" onclick="flipSwitch(this)">
<label class="flipswitch-label" for="flipswitchRecurring">
<div class="flipswitch-inner"></div>
<div class="flipswitch-switch"></div>
</label>
</div>
<!-- Disabled switch -->
<div class="flipswitch2" style="float: left; margin-left: 35px">
<input type="checkbox" name="flipswitchEnabled" id="flipswitchEnabled" class="flipswitch2-cb">
<label class="flipswitch2-label" for="flipswitchEnabled">
<div class="flipswitch2-inner"></div>
<div class="flipswitch2-switch"></div>
</label>
</div>
</div>
</div>
</form>
How can I center these 2 DIVs?

Answer 1

Modification to your code (Added text-align:center and display:inline-block) =>
<form method="post" action="Invitation.php?AccessCode=5GR1A67833Y7W98UW8546FJM8" onsubmit="return checkForm(this)">
<div style="width: 100%">
<div style="text-align: center;">
<!-- Manual switch -->
<div class="flipswitch" style="display: inline-block;">
<input type="checkbox" name="flipswitchRecurring" id="flipswitchRecurring" class="flipswitch-cb" onclick="flipSwitch(this)">
<label class="flipswitch-label" for="flipswitchRecurring">
<div class="flipswitch-inner"></div>
<div class="flipswitch-switch"></div>
</label>
</div>
<!-- Disabled switch -->
<div class="flipswitch2" style="display: inline-block;">
<input type="checkbox" name="flipswitchEnabled" id="flipswitchEnabled" class="flipswitch2-cb">
<label class="flipswitch2-label" for="flipswitchEnabled">
<div class="flipswitch2-inner"></div>
<div class="flipswitch2-switch"></div>
</label>
</div>
</div>
</div>
</form>

Answer 2

As usual, what is a pain with classic CSS (float, inline-block, etc.) is a breeze with Flexbox.
form {
border: blue dashed 2px;
}
.centrer {
display: flex;
justify-content: center;
}
.switchBlock {
border: red dashed 2px;
width: 100px;
}
.switchBlock:nth-child(2) {
margin-left: 35px;
}
<form method="post" action="Invitation.php?AccessCode=5GR1A67833Y7W98UW8546FJM8" onsubmit="return checkForm(this)">
<div class="centrer">
<!-- Manual switch -->
<div class="switchBlock flipswitch">
<input type="checkbox" name="flipswitchRecurring" id="flipswitchRecurring" class="flipswitch-cb" onclick="flipSwitch(this)">
<label class="flipswitch-label" for="flipswitchRecurring">
<div class="flipswitch-inner"></div>
<div class="flipswitch-switch"></div>
</label>
</div>
<!-- Disabled switch -->
<div class="switchBlock flipswitch2">
<input type="checkbox" name="flipswitchEnabled" id="flipswitchEnabled" class="flipswitch2-cb">
<label class="flipswitch2-label" for="flipswitchEnabled">
<div class="flipswitch2-inner"></div>
<div class="flipswitch2-switch"></div>
</label>
</div>
</div>
</form>