Problemas com posicionamento de icones

Front-end
, ,
#1

Bom dia amigos,

estou com um amigo criando um site para colocar em pratica nossos estudos, só que estamos com um grande problema neste botões de rede social, não conseguimos posicionar esta imagem no centro dos círculos, alguém pode nós dar uma luz?

Untitled

Aqui está as tags em HTML…

☰

<h1>Atari Mania</h1>

<section>

        <div class="rede" id="facebook">

            <img class="icone" src="imagens/facebook.png"/>

        </div>

        <div class="rede" id="twitter">

            <img class="icone" src="imagens/twitter.png"/>

        </div>

        <div class="rede" id="instagram">

            <img class="icone" src="imagens/instagram.png"/>

        </div>

        <div class="rede" id="snap">

            <img  class="icone" src="imagens/snap.png"/>

        </div>

        <div class="rede" id="plus">

            <img class="icone" src="imagens/plus.png"/>

        </div>

        <div class="rede" id="youtube">

            <img class="icone" src="imagens/youtube.png"/>

        </div>

    </section>

E aqui está as tags em CSS…

/REDE SOCIAL INTERATICA INICIO/
section{
margin: 10px auto;
width: 1200px;
height: 90px;
}
.rede {
width: 50px;
height: 50px;
float: right;
margin-left: 30px;
transition: all 0.4s ease-out;
border-radius: 50%;

}
.rede#facebook{
background-color: #2372a3;

}
.rede#twitter{
background-color: #0084b4;
}
.rede#instagram {
background-color: #3f729b;
}
.rede#snap {
background-color: #fc0;
}
.rede#plus{
background-color: #dd4b39;
}
.rede#youtube {
background-color: #b00;
}
.icone {
padding: 3px;
width: 3%;
position: absolute;
margin-right: 15%;
transform: translate(15%, 15%, 1%);
float: right;

}
/REDE SOCIAL FINAL/

desde já agradeço pro qualquer ajuda! :smiley:

#2

Html

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<center><h1>Atari Mania</h1></center>

        <img class="icone" src="images/facebook.png" />

    </div>

    <div class="rede" id="twitter">

        <img class="icone" src="images/twitter.png"/>

    </div>

    <div class="rede" id="instagram">

        <img class="icone" src="images/instagram.png"/>

    </div>

    <div class="rede" id="snap">

        <img  class="icone" src="images/snap.png"/>

    </div>

    <div class="rede" id="plus">

        <img class="icone" src="images/plus.png"/>

    </div>

    <div class="rede" id="youtube">

        <img class="icone" src="images/youtube.png"/>

    </div>

</section>

CSS

*{

padding: 0px;
margin: 0px;
}

section{
margin: 50px auto;
width: 1025px;
height: 150px;
}

.rede{
width: 150px;
height: 150px;
float: left;
margin-left: 20px;
transition: all 0.4s ease-out;
border-radius: 50%;
}

.rede:hover{
cursor: pointer;
transform: translateY(-20px);
box-shadow: 4px 30px 16px 0px rgba(50,50,50, 0.45);
}

.rede#facebook{
background-color: #2372a3;

}
.rede#twitter{
background-color: #0084b4;
}
.rede#instagram{
background-color: #3f729b;
}

.rede#snap{
background-color: #fc0;
}
.rede#plus{
background-color: #dd4b39;
}
.rede#youtube{
background-color: #8B0000;
}

.icone{
margin:0px auto;
padding: 35px;
width: 80px;
}