Centrar un div dentro doutro

Cando maquetamos na web, non debemos de empregas as táboas. As táboas só se empregan para almacenar valores numéricos. A alternativa ás táboas son dos contedores div. Neste caso creo un contedor chamado container e dentro del outro que chamo texto. O primeiro está centrado con respecto á pantalla e o segundo está centrado con respecto ao primeiro tanto vertical como horizontalmente.

 

a. Coa clase flexbox. Moi sinxela. Debemos de asignalle ao contenedor .container as seguintes instrucións:

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 .container{
 margin:0 auto;
 background:yellowgreen;
 width:600px;
 height: 70vh;
 display:flex;
 justify-content: center;
 align-items: center;
 }
 
 .texto{
 background:orangered;
 width:400px;
 height: 200px;
 
 }
 </style>
</head>
<body>
 <div class="container">
 <div class="texto">
 </div>
 </div>
</body>
</html>

 

 

b. A segunda forma de facelo pode ser a seguinte. Darémoslle unha posición relative ao contedor texto e seguidamente empregaremos margin:o auto; para centralo horizontalmente e un top:50%; e tranform:translateY(-50%) para centralo verticalmente.


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 .container{
 margin:0 auto;
 background:yellowgreen;
 width:600px;
 height: 70vh;
 }
 
 .texto{
 background:orangered;
 position:relative;
 width:400px;
 height: 200px;
 margin:0 auto;
 top:50%;
 transform: translateY(-50%);
 }
 </style>
</head>
<body>
 <div class="container">
 <div class="texto">
 
 </div>
 </div>
 
</body>
</html>