CSS Put all floated elements in middle of main wrapper DIV - html

Question

I am trying to align my .homepagewebsitefeatures DIVs so they show in the center of its wrapper #homepagewebsitefeatures.
I have tried margin-left: auto; and margin-right: auto;, but without much luck.
Here is my code:
.homepagewebsitefeaturescontent {
float: left;
margin-left: 15px;
width: auto;
font-size: 20px;
}
.homepagewebsitefeaturesimage {
float: left;
width: auto;
display: flex;
}
.homepagewebsitefeatures {
display: flex;
align-items: center;
}
#homepagewebsitefeatures {
background-color: rgba(242, 242, 242, 0.7);
padding: 35px;
margin-top: 45px;
clear: both;
overflow: auto;
}
.homepagewebsitefeatures {
float: left;
width: auto;
clear: none;
margin-right: 5%;
}
.homepagewebsitefeatureswrap {
overflow: auto;
}
<div id="homepagewebsitefeatures">
<div class="margin homepagewebsitefeatureswrap">
<div class="homepagewebsitefeatures">
<div class="homepagewebsitefeaturesimage">
<img src="/wp-content/uploads/2016/04/tech-support.png" alt="Website Technical Support">
</div>
<div class="homepagewebsitefeaturescontent">
Technical Support
</div>
</div>
<div class="homepagewebsitefeatures">
<div class="homepagewebsitefeaturesimage">
<img src="/wp-content/uploads/2016/04/edit-website.png" alt="Edit website">
</div>
<div class="homepagewebsitefeaturescontent">
Edit your website
</div>
</div>
<div class="homepagewebsitefeatures">
<div class="homepagewebsitefeaturesimage">
<img src="/wp-content/uploads/2016/04/globe-domain-hosting.png" alt="Globe Hosting & UK Domain Name">
</div>
<div class="homepagewebsitefeaturescontent">
UK domain & hosting
</div>
</div>
</div>
</div>

Answer 1

Try changing #homepagewebsitefeatures to display: flex and use the following CSS attributes for centering content:
align-items: center;
justify-content: center;

Answer 2

If your homepagewebsitefeatures elements are floated. In order to get all of the floated elements centered(horizontally) you are going to want to make their wrapper, homepagewebsitefeatureswrap have auto left and right margins (and display: inline-block) and have their parent container, homepagewebsitefeatures, have text-align: center. Something like so:
# homepagewebsitefeatures {
text-align: center;
}
.homepagewebsitefeatureswrap {
display: inline-block;
margin-left: auto;
margin-right: auto;
}
FIDDLE DEMO
.wrap {
background: lightblue;
text-align: center;
}
.container {
display: inline-block;
background: grey;
margin: 0 auto;
}
.container::before,
.container::after {
content: '';
display: table;
}
.container::after {
clear: both;
}
.float {
padding: 10px;
float: left;
}
.float > span {
background: red;
}
.container {
display: inline-block;
}
<div class="wrap">
<div class="container">
<div class="float"><span>float</span></div>
<div class="float"><span>float</span></div>
<div class="float"><span>float</span></div>
</div>
</div>