Tres formas infalibles de centrar elementos en CSS
Centrando elementos aplicando tres métodos css: flex, grid y position:absolute
1 - Con position:absolute
* {
margin: 0;
padding: 0;
font-size: 16px;
font-family: 'Roboto', sans-serif;
}
.div-positon-absolute {
position: absolute;
border: 1px solid tomato;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
<body>
<main>
<h1>Center with position:absolute</h1>
<div class="div-positon-absolute">
<span>🦄</span>
</div>
</main>
</body>
2 - Con Flex
* {
margin: 0;
padding: 0;
font-size: 16px;
font-family: 'Roboto', sans-serif;
}
.div-flex {
height: 400px;
border-top: 1px solid greenyellow;
border-bottom: 1px solid greenyellow;
display: flex;
justify-content: center;
align-items: center;
}
<body>
<main>
<h1>Flex</h1>
<div class="div-flex">
<span>🦄</span>
<span>🦄</span>
<span>🦄</span>
</div>
</main>
</body>
3 - Con Grid
* {
margin: 0;
padding: 0;
font-size: 16px;
font-family: 'Roboto', sans-serif;
}
.div-grid {
height: 400px;
border-top: 1px solid orange;
border-bottom: 1px solid orange;
display: grid;
}
.div-grid .item {
align-self: center;
justify-self: center;
}
<body>
<main>
<h1>Center with grid</h1>
<div class="div-grid">
<span class="item">🦄</span>
</div>
</main>
</body>
Como nota final agregar que parte de este código es una adaptación del mostrado por CodelyTV en este
Vídeo.
Aqui explican 5 formas yo me he quedado con las tres últimas.
Dejo un enlace al código fuente en mi github
Autor: Eduardo A. F.
Publicado: 13-12-2021 19:41