Submitted by martin on Lun, 06/10/2019 - 09:02

A. Nesta primeira opción centramos horizontalmente o contido. Para isto creamos un div con clase contido e ademais de darlle as dimensións de alto e ancho, aplicamoslle un margin 0 auto. Seguidamente engadimos outro div dentro do cal está inserido o texto. Neste segundo div, fillo de contido, aplicamos un display:table-cell e un vertical-align:middle.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Centrar div</title>
    <style>
    .contido{
        margin:0 auto;
        width:300px;
        height:200px;
        background:black;
    }    
    .texto{
        height:200px;
        display:table-cell;
        vertical-align: middle;
    }

    .texto p{
        color:white;
    }
    </style>
</head>
<body>
    <div class="contido">
        <div class="texto">
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            Aut quas voluptas culpa ea corporis alias nobis vel, doloribus illo obcaecati.</p>
        </div>
    </div>
</body>
</html>

 

B. Na segunda opción, centramos o div fillo texto empregando a propiedade de CSS transform. Para isto ao div pai configuramos a propiedade de position como relative. O div fillo (texto), configúrase coa propiedade absolute, para desprazalo div fillo o 50% da altura do elemento pai, contido. Seguidamente facemos un transform:translateY(-50%); para subir de novo o 50% da altura do div fillo texto.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Centrar div</title>
    <style>
    .contido{
        margin:0 auto;
        width:300px;
        height:200px;
        background:black;
        position:relative;
    }    
    .texto{
        position:absolute;
        top:50%;
        transform:translateY(-50%);
    }

    .texto p{
        color:white;
    }
    </style>
</head>
<body>
    <div class="contido">
        <div class="texto">
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            Aut quas voluptas culpa ea corporis alias nobis vel, doloribus illo obcaecati.</p>
        </div>
    </div>
</body>
</html>

Una práctica máis completa podémola ver no seguinte exemplo, incluso empregando o media query para visualizalo correctamente en dispositivos móbiles.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
   
<style>
        .strong{
            font-weight: bold;
        }  
        .titulo_seccion{
            font-family: Verdana, Geneva, Tahoma, sans-serif, serif;
            font-size:25px;
            font-weight: 100;
            text-align: center;
            color:white;
        }

        .contenido_seccion {
            font-family: Verdana, Geneva, Tahoma, sans-serif, serif;
            text-align: left;
            font-size: 14px;
            color:white;   
        }

        .contenido_seccion a{
            color:black;
            text-decoration:none;
        }
        
        #diseño{
            width:100%;
            height:355px;
            overflow: hidden;
            background:#7d5c7d;
            position:relative;
            
        }

        #diDesarrollo{
            width:50%;
            position:absolute;
            top:50%;
            left:25%;
            transform:translateX(-25%);
            transform:translateY(-50%);
      
        }

        @media  (max-width: 480px) {
            #diseño{
            height:415px;
            position:relative;
            }

            #diDesarrollo{
            width:95%;
            position:absolute;
            top:50%;
            left:2.5%;
            transform:translateX(-2.5%);
            transform:translateY(-50%);
            }
                    
        }    
   
 </style>
</head>
<body>
        <section id="diseño">
                <article id="diDesarrollo">
                    <h3 class="titulo_seccion">Texto centrado</h3>
                    <p class="contenido_seccion">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                         Totam, deserunt officia exercitationem hic accusamus ipsam optio error eum facere
                         magni, et fuga. Fugit incidunt at ipsa beatae eos inventore pariatur tempore rem
                         possimus repellat! <span class="strong">Ipsam debitis dicta</span> voluptatem consequatur? Perspiciatis tempora
                          repellendus vel harum inventore quo ratione deleniti voluptatem ad.</p>
                </article>
    
        </section>
    
</body>
</html>