27904 sujets

CSS et mise en forme, CSS3

Bonjour j'aimerais centrer mon bouton au milieu de ma page html voici mon code :

<style>
a {
display: block;
margin : auto;
}
button {
display: inline-block;
background-color: transparent;
border-radius: 10px;
border: 4px double transparent;
color: transparent;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;

}
button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
button span:after {
content: "\00bb";
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
button:hover {
background-color: transparent;
}
button:hover span {
padding-right: 25px;
}
button:hover span:after {
opacity: 1;
right: 0;
}
Pour qu'un bouton soit centré en hauteur il faut déjà que la page ait une hauteur.

Voici une page en ligne avec un exemple de positionnement centré : codepen