{"id":3055,"date":"2024-03-22T10:22:01","date_gmt":"2024-03-22T13:22:01","guid":{"rendered":"https:\/\/aleare.com.ar\/blog\/?p=3055"},"modified":"2024-11-17T22:03:43","modified_gmt":"2024-11-18T01:03:43","slug":"como-centrar-un-div-con-html-css","status":"publish","type":"post","link":"https:\/\/aleare.com.ar\/blog\/como-centrar-un-div-con-html-css\/","title":{"rendered":"Tirame un centro: c\u00f3mo centrar un DIV con HTML y CSS"},"content":{"rendered":"
<\/div>

\u00bfC\u00f3mo centrar perfectamente un DIV? Es la pregunta que me hac\u00eda en mis primeras \u00e9pocas de programadora, y de la que me hubiese gustado tener la respuesta posta para facilitar mi trabajo. Y para lucirme entre los dem\u00e1s programadores, ja \ud83d\ude0e. Centrar un elemento DIV tanto vertical como horizontal fue siempre un desaf\u00edo para expertos en las viejas \u00e9pocas, sobre todo cuando necesit\u00e1bamos una soluci\u00f3n que funcionara en todos los navegadores (sin tener que recurrir a hacks). Con el nuevo HTML5 y CSS3, todo esto nos facilit\u00f3 la tarea.<\/p>\n

En este post vamos a analizar tres m\u00e9todos para centrar un DIV horizontal y verticalmente con HTML y CSS, cada uno con dos variantes distintas, con ejemplos de CodePen<\/strong><\/a> para que lo veas funcionando. No solo se ven bien y funcionan, sino que adem\u00e1s mantienen sus virtudes a trav\u00e9s de los distintos dispositivos.<\/p>\n

Veamos:
\n.<\/span><\/p>

\r\n\"Samsung<\/a>\r\nSamsung Galaxy Tab A11 Color Gris Capacidad 64 GB Ram 4GB | $256.090<\/span>\r\n

Ver m\u00e1s productos <\/i><\/a><\/p>\r\n<\/div><\/div>\n

M\u00e9todo 1: Flexbox<\/h2>\n

El m\u00e9todo Flexbox es casi el Superman del dise\u00f1o web responsivo debido a su facilidad de uso, flexibilidad y resistencia en los diferentes dispositivos. En esta primera variante, aplicamos las siguientes propiedades CSS al contenedor padre solamente:<\/p>

\u0421ollaborator<\/a><\/div><\/div>\n