html - How to center wrapper on page - links -

i had wrapper centered on website when added links icons inside of it, position changed. tried center them again doesnt seem work because when change zoom or resize page not in center anymore.

the html

<div class="wrappericons">     <a href="http://www.facebook.com"><div id="facebook"></div></a>     <a href="http://www.youtube.com"><div id="youtube"></div></a>     <a href="http://www.twitter.com"><div id="twitter"></div></a>     </div> 

and css

.wrappericons {     margin: auto;     width: 15%;     background-color: none;     display: flex;     -webkit-display: flex;     -moz-display: flex;     align-items: center;     -webkit-align-items: center;     -moz-align-items: center;     padding-left: -20px;}   #facebook {     height: 60px;     width: 33,33%;     margin-left: 50%;     margin-right: 50%;     background-color: none;     background-image: url(icons/facebookgrey.svg);     background-size: contain;     background-repeat: no-repeat;     background-position: center;     align-items: center;     -webkit-align-items: center;     -moz-align-items: center;     display: flex;     -webkit-display: flex;     -moz-display: flex;     min-width: 45px;     float: left;     position: relative;}  #facebook:hover {     background-image:url(icons/facebook.svg);}  #youtube {     height: 60px;     width: 33,33%;     margin-left: 75%;     background-color: none;     background-image: url(icons/youtubegrey.svg);     background-size: contain;     background-repeat: no-repeat;     background-position: center;     align-items: center;     -webkit-align-items: center;     -moz-align-items: center;     display: flex;     -webkit-display: flex;     -moz-display: flex;     min-width: 45px;     float: left;     position: relative;}  #youtube:hover {     background-image:url(icons/youtube.svg);}  #twitter {     height: 60px;     width: 33,33%;     margin-left: 100%;     background-color: none;     background-image: url(icons/twittergrey.svg);     background-size: contain;     background-repeat: no-repeat;     background-position: center;     align-items: center;     -webkit-align-items: center;     -moz-align-items: center;     display: flex;     -webkit-display: flex;     -moz-display: flex;     min-width: 45px;     float: left;     position: relative;}  #twitter:hover {     background-image:url(icons/twitter.svg);} 

ps: used chrome see code

i'm not sure if wanted do, created jsfiddle , result may expected.

i used html @berat baran cevik created in acceptable html syntax (you shouldn't putting blocks - div, sectin, etc - inside link tags).

    <div class="wrappericons">           <span id="facebook"><a href="http://www.facebook.com"></a></span>           <span id="youtube"><a href="http://www.youtube.com"></a></span>           <span id="twitter"><a href="http://www.twitter.com"></a></span>     </div> 

in css changed "," in width property "." each div has own width, don't need specify margin-left nor position, took off.

.wrappericons {     margin: auto;     width: 100%;     background-color: none;     display: flex;     -webkit-display: flex;     -moz-display: flex;     align-items: center;     -webkit-align-items: center;     -moz-align-items: center;}   #facebook {     height: 60px;     width: 33.33%;     background-image: url("http://creativedroplets.com/samples/svg/simplify/img/napoleon%20for%20svg%20simpl%201.svg");     background-size: contain;     background-repeat: no-repeat;     background-position: center;     display: flex;     -webkit-display: flex;     -moz-display: flex;     min-width: 45px;     float: left;     position: relative; }  #youtube {    height: 60px;     width: 33.33%;     background-image: url("http://creativedroplets.com/samples/svg/simplify/img/napoleon%20for%20svg%20simpl%201.svg");     background-size: contain;     background-repeat: no-repeat;     background-position: center;     display: flex;     -webkit-display: flex;     -moz-display: flex;     min-width: 45px;     float: left;     position: relative; }  #twitter {      height: 60px;     width: 33.33%;     background-image: url("http://creativedroplets.com/samples/svg/simplify/img/napoleon%20for%20svg%20simpl%201.svg");     background-size: contain;     background-repeat: no-repeat;     background-position: center;     display: flex;     -webkit-display: flex;     -moz-display: flex;     min-width: 45px;     float: left;     position: relative; }