Centrado absolucto con CSS y Bootstrap

Jorge Catalao diciembre 05, 2023

En este tutorial, aprenderás a crear un diseño centrado absolutamente utilizando HTML y CSS. Este diseño constará de un contenedor azul que ocupa toda la pantalla, una columna amarilla dentro de ese contenedor y un cuadrado blanco centrado en esa columna.

Paso 1: Estructura HTML Básica

Comencemos creando un documento HTML básico. Abre tu editor de código favorito y escribe el siguiente código:


          
            <!DOCTYPE html>
            <html lang="es">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
                <link rel="stylesheet" href="estilos.css">
                <title>Centrado Absoluto</title>
            </head>
            <body>
                <!-- Aquí va nuestro contenido centrado -->
                <div class="contenedor-azul">
                <div class="col-4 col-4-amarilla">
                    <div class="cuadrado">
                        <!-- Contenido del cuadrado -->
                        <p>Contenido centrado</p>
                    </div>
                </div>
            </div>
            </body>
            </html>

...

Tags:
Jorge Catalao

Posted by: Jorge Catalao

Durante el decorrer de los años y ya desde niño mis gustos preferidos, fue siempre la electrónica y la programación, eso que llevo a que me formase en varias escuelas profesionales, en temas tales como: electrónica Electricidad programación Técnicas de refrigeración etc. Tengo varias carreras profesionales relacionadas a los temas anteriormente descritos, precisamente por ese motivo, me he entusiasmado a crear un blog donde los temas serán los mencionados anteriormente. Espero que a mis visitantes les guste, y se aprovechen de los conocimientos que llevo años recopilando. Si eres estudiante de electricidad, electrónica o programación, aquí vas adquirir los conocimientos básicos, tanto para que continúes tus estudios, como para tu formación profesional. Cursos completos desde cero, los iré recopilando poco a poco, los cuales servirán para consulta tanto de estudiantes como electricistas profesionales, será como un manual o mas bien dicho un resumen donde podremos encontrar lo que necesitamos. Bueno espero que vos guste y me seguis, ya que los temas los ire duplicar tanto nel blog, como en mi canal de youtube.

Publicar un comentario

0 Comentarios

Si desea contactar comigo, lo puede hacer atravez deste formulario gracias