1

Cordial saludo amigos, estoy iniciando en la programación con PHP, y comenzando a desarrollar bajo el patron MVC, esto significa que tendré un cabezote estático siempre y en ficheros aparte pondré el contenido que aparecerá abajo del cabezote y antes del Footer... (No se si alcanzo a ser claro con mi idea). Quiero que en mi pagina de inicio, solo aparezca un saludo, pero quiero que siempre esté centrado verticalmente sin importar el alto de la pantalla en el que se visualice.

introducir la descripción de la imagen aquí

En este caso quiero que ese "Bienvenido" siempre esté centrado verticalmente, la pagina inicio no tendrá otro contenido.

Aqui muestro el código que he puesto en mi pagina inicio.

<div class="py-5 contenido1">
    <div class="row">
        <div class="col-12" id="saludo">        
            <p>Bienvenido..!</p>
        </div>  
    </div>      
</div>

Este es el código que tengo para mi hoja de estilos CSS.

*{
    margin: 0;
    padding: 0;
}

#saludo p {
    font-family: 'Berkshire Swash', cursive;
    font-size: 70px;
    text-align: center;
}

En mi fichero plantilla.php tengo el siguiente código, para incluir el contenido de mis siguientes páginas.

<div class="container-fluid">
        <div class="container">

            <?php 

            include 'paginas/inicio.php';

            ?>
            
        </div>
    </div>

Agradezco si me pueden ayudar como hacer para centrar mi saludo verticalmente, pues he intentado con clases bootstrap, con css, pero en realidad ninguna me ha funcionado hasta el momento, quizas no estoy maquetando de manera correcta pero no logro encontrar el error.

El resultado que quiero lograr es este:

introducir la descripción de la imagen aquí

Quedo atento a sus comentarios.

1
  • @JheymanMejia gracias por tu comentario, ya mi pregunta fue resuelta... el 8 sep. 2020 a las 19:08

2 respuestas 2

5

Puedes utilizar las clases que dispone bootstrap sobre flex. La clase d-flex equivale a display: flex en css, para centrar los elementos hijos en el eje vertical se utiliza la clase align-items-center y para el eje horizontal justify-content-center. Mayor información en el siguiente enlace: https://getbootstrap.com/docs/4.5/utilities/flex/

Un ejemplo de como funciona es el siguiente (los style height solo son para evidenciar el centrado de los elementos):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <!---- Esto es solo importación del bootstrap --->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

    </head>
    <body>
        <header class="d-block bg-primary" style="height: 50px">Tu cabecera</header>
        
        <div class="container">
            <div class="d-flex align-items-center justify-content-center" style="height: 300px">
                <h1>HOLA MUNDO</h1>
            </div>
        </div>
          <footer class="d-block bg-secondary" style="height: 50px">Pie de pagina</footer>
      </body>
</html>

2

puedes hacer esto usando flexbox añade las siguientes propiedades a tu elemento contenido1

 .contenido1{
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 80vh;
        width:100%;
    }

agregando eso deberia bastar, un saludo

1
  • Muchas gracias @CristianGerani, efectivamente si me funcionó, utilicé parte del código que me diste y otra parte del que me ofreció Ricardo Campos Villaroel, en su respuesta, en este usé mejor las clases de bootstrap. Gracias por su ayuda. el 6 sep. 2020 a las 4:29

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.