0
En este Tutoriales En Linea les traemos este truco de efecto que permite efectos visuales en centrado - centered en CSS3.
Background：display, calc(), flex
Hace 44 años pusimos a un hombre en la luna, pero todavía no podemos centrar verticalmente las cosas en CSS —James Anderson.Todas las prácticas mencionadas en la siguiente parte, lo he experimentado en mi propio proyecto. Esas prácticas tienen tanto ventajas como desventajas. Ustedes pueden elegir la solución más adecuada según su preferencia.
display: flex+ margin: auto sin límite de ancho y alto
<style>
main{
width: 100%;
min-height: 152px;
display: flex;
}
main > span {
background: #b4a078;
color: white;
margin: auto;
padding: .3em 1em .5em;
border-radius: 3px;
box-shadow: 0 0 .5em #b4a078;
}
</style>
<main>
<span>¡Centro, por favor!</span>
</main>
display: grid no limit to width & height
<style>
main{
width: 100%;
min-height: 152px;
display: grid;
justify-content: center;
align-items: center;
}
main > span {
background: #b4a078;
color: white;
padding: .3em 1em .5em;
border-radius: 3px;
box-shadow: 0 0 .5em #b4a078;
}
</style>
<main>
<span>¡Centro, por favor!</span>
</main>
Comentarios