margin: auto; how to apply in this case

The post is old but worth a caveat. I modified stylization by simply exemplifying how I could do what I wanted in a few lines. An important modification was not treating children independently, but as part of a group. This reduces the number of statements. I hope I have contributed.

.p_sects {
  background: #cccccc;
  text-align: center;
  padding: 2em 0;
}

.p_sects .icon-p {
  display: inline-block;
  vertical-align: middle;
  padding: 1em;
  border: 2px solid #333333;
  margin: 0 4px;
}

<div class="p_sects">
  <div class="icon-p"></div>
  <div class="icon-p"></div>
  <div class="icon-p"></div>
</div>

Dude, I did not quite understand your code, but simplifying it follows what I did:

<div class="p_sects">
    <div class="pai">
        <div class="icon"></div>
        <div class="icon"></div>
        <div class="icon"></div>
    </div>
</div>

.p_sects {
    border-top: 1px solid #ccc;
    width: 597px;
    margin-top: 14px !important;
    margin: auto;
    padding: 11px;
    padding-bottom: 0px;
    text-align:center;
}
.pai {
    display:inline-block;
}
.icon {
    float:left;
}
.icon:before {
    content:'\E84B';
    font-size: 23px;
    margin-left:20px;
    color: rgba(128, 128, 128, 0.61);
}
.icon:first-child:before {
    margin-left:0;
}

link

If I do not do what I have done and want to explain the goal better, please let me know if I can help you in any other way.

I made several changes: Html:

<div class="p_sects">
    <div class="icon-p_a1"></div>
    <div class="icon-p_a2"></div>
    <div class="icon-p_a3"></div>
</div>

CSS:

.p_sects {
    border-top: 1px solid #ccc;
    width: 597px;
    margin: auto;
    margin-top: 14px !important;
    padding: 11px;
    padding-bottom: 0px;
    text-align: center;
}
.icon-p_a1:before {
    content: '\E84E';
}
.icon-p_a1{
    /*float: left;*/
    display: inline;
    font-size: 22px;
    color: rgba(128, 128, 128, 0.61);
}
.icon-p_a2:before {
    content: '\E801';
}
.icon-p_a2{
    font-size: 22px;
    /*float: left;*/
    display: inline;
    /*margin-top: -1px;
    margin-left: 20px;*/
    color: rgba(128, 128, 128, 0.61);
}
.icon-p_a3:before {
    content: '\E84B';
}
.icon-p_a3{
    font-size: 23px;
    /*float: left;*/
    display: inline;
    /*margin-top: -2px;
    margin-left: 20px;*/
    color: rgba(128, 128, 128, 0.61);
}

See: link

In order for the child elements to be positioned relative to the parent element, you must use position:relative in your .p_sects class. This way margin: auto will work perfectly.

Here's an example:

.pai {
    position: relative;
    height: 300px;
    width: 300px;
    
    border: 1px dashed #ccc;
}

.filha {
    margin: auto; /* ... */
    width: 150px;
    height: 100px;
}

/* somente para visualização */
.filha:first-child {
    background: skyblue;
}

/* somente para visualização */
.filha:last-child {
    background: yellow;
}

<div class="pai">
    <div class="filha">1</div>
    <div class="filha">2</div>
    <div class="filha">3</div>
</div>

Then you can apply display:inline or display:inline-block to child classes if you want them to appear online.

If you're a little more Hardcore , you can try the flexbox property ( very interesting and complete guide created by css-tricks ).